Ripple Rings

About this module

Rings periodically spawn from the center and expand outward, fading as they grow — a clean radar effect.

Installation

1. 1

   Create the files

   Create `index.html`, `style.css` and `script.js` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the canvas markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <div class="mh-canvas-wrap">
     <canvas id="mh-canvas"></canvas>
   </div>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const canvas = document.getElementById("mh-canvas");
   const ctx = canvas.getContext("2d");
   let w, h, dpr = Math.min(window.devicePixelRatio || 1, 2), t = 0;
   const rings = [];
   function resize() {
     const rect = canvas.parentElement.getBoundingClientRect();
     w = rect.width; h = rect.height;
     canvas.width = w * dpr; canvas.height = h * dpr;
     canvas.style.width = w + "px"; canvas.style.height = h + "px";
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
   function tick() {
     ctx.clearRect(0, 0, w, h);
     t++;
     if (t % 45 === 0) rings.push({ r: 4, alpha: 0.7 });
     const cx = w / 2, cy = h / 2;
     for (let i = rings.length - 1; i >= 0; i--) {
       const ring = rings[i];
       ring.r += 1.6; ring.alpha -= 0.008;
       if (ring.alpha <= 0 || ring.r > Math.max(w, h)) { rings.splice(i, 1); continue; }
       ctx.beginPath(); ctx.arc(cx, cy, ring.r, 0, Math.PI * 2);
       ctx.strokeStyle = "#22d3ee";
       ctx.globalAlpha = Math.max(0, ring.alpha);
       ctx.lineWidth = 2; ctx.stroke();
       ctx.globalAlpha = 1;
     }
     requestAnimationFrame(tick);
   }
   resize(); window.addEventListener("resize", resize); tick();