JSFiddle - React, Tailwind, and code Playground

ripples

by greg gorlen

HTML

<canvas id="paper" width=600 height=400></canvas>

CSS

body {
  background-color: #000;
}

#paper {
  border: 1px solid #fff;
  background-color: #000;
}

JavaScript

// Todo : add a few smaller waves for each ripple

"use strict";


let canvas = document.getElementById("paper");
let ctx = canvas.getContext("2d");
let ripples = [];

function rInt(lo, hi) {
  if (!lo && !hi) {
    lo = 0;
    hi = 2;
  }
  else if (!hi) {
    hi = lo;
    lo = 0;
  }
  return Math.random() * (hi - lo) + lo | 0;
}

(function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  if (Math.random() > 0.97) {
    let x = rInt(canvas.width);
    let y = rInt(canvas.height);
    
    ripples.push({
      "x" : x,
      "y" : y,
      size: 0 
    });
  }
  
  for (let i = 0; i < ripples.length; i++) {
    let alpha = (ripples[i].size - canvas.width / 4) / (0 - canvas.width / 4);
    ctx.strokeStyle = "rgba(255, 255, 255, " + alpha + ")";
    ctx.beginPath();
    ctx.arc(ripples[i].x, ripples[i].y, ripples[i].size, 0, Math.PI * 2);
    ctx.stroke();
    
    if (++ripples[i].size > canvas.width / 3) { ripples.splice(i--, 1); }
  }
  requestAnimationFrame(update);
})();