Canvas Ripple Click Effect — Free Expanding Ring Snippet

<div class="rp-wrap">
  <canvas id="rpCanvas" class="rp-canvas"></canvas>
  <p class="rp-hint">Click anywhere in the panel.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#07080d;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.rp-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(720px,96vw)}
.rp-canvas{width:100%;aspect-ratio:16/9;background:radial-gradient(120% 100% at 50% 0%,#111726,#07080d 70%);border-radius:18px;border:1px solid rgba(255,255,255,.08);display:block;cursor:pointer}
.rp-hint{color:#6b7284;font-size:12px;letter-spacing:.04em}

const canvas = document.getElementById('rpCanvas');
const ctx = canvas.getContext('2d');
let width, height, dpr;
let ripples = [];

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

function clickPos(e) {
  const rect = canvas.getBoundingClientRect();
  const t = e.touches ? e.changedTouches[0] : e;
  return { x: t.clientX - rect.left, y: t.clientY - rect.top };
}

function spawnRipple(x, y) {
  const maxRadius = Math.hypot(width, height) * 0.45;
  const hue = 190 + Math.random() * 100;
  // Each click adds three concentric rings with a slight delay between them,
  // each an independent object animating its own radius and fade.
  for (let i = 0; i < 3; i++) {
    ripples.push({
      x, y,
      radius: 0,
      maxRadius,
      delay: i * 8,
      age: 0,
      hue,
      lineWidth: 3 - i * 0.6
    });
  }
}

canvas.addEventListener('click', e => {
  const p = clickPos(e);
  spawnRipple(p.x, p.y);
});
canvas.addEventListener('touchstart', e => {
  const p = clickPos(e);
  spawnRipple(p.x, p.y);
}, { passive: true });

function tick() {
  ctx.clearRect(0, 0, width, height);

  ripples.forEach(r => {
    r.age++;
    if (r.age < r.delay) return;
    const t = (r.age - r.delay) / 55;
    r.radius = r.maxRadius * Math.min(t, 1);
    const alpha = Math.max(0, 1 - t);
    ctx.beginPath();
    ctx.arc(r.x, r.y, r.radius, 0, Math.PI * 2);
    ctx.strokeStyle = 'hsla(' + r.hue + ',85%,65%,' + alpha + ')';
    ctx.lineWidth = r.lineWidth;
    ctx.stroke();
  });

  ripples = ripples.filter(r => r.age < r.delay || r.radius < r.maxRadius);
  requestAnimationFrame(tick);
}

resize();
window.addEventListener('resize', resize);
tick();