Animation

HTML

CSS

JS

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height, gridSize;
const config = {
  gridCount: 10,
  speed: 0.0025,
  phaseStrength: 0.05,
  lineWidth: 1,
  pauseDuration: 0.5
};
function ease(t) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
}
function init() {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  gridSize = width / config.gridCount / 2;
}
function drawCell(x, y, size, progress) {
  const half = size / 2;
  ctx.beginPath();
  ctx.rect(x - half, y - half, size, size);
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = config.lineWidth;
  ctx.stroke();
  if (progress > 0.01) {
    ctx.beginPath();
    ctx.moveTo(x, y - half);
    ctx.lineTo(x, y + half);
    ctx.moveTo(x - half, y);
    ctx.lineTo(x + half, y);
    ctx.strokeStyle = `rgba(255, 255, 255, ${progress})`;
    ctx.stroke();
  }
}
let time = 0;
function animate() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, width, height);
  const cx = width / 2;
  const cy = height / 2;
  const cols = config.gridCount + 4;
  const rows = Math.ceil(height / gridSize) + 4;
  for (let i = -cols/2; i <= cols/2; i++) {
    for (let j = -rows/2; j <= rows/2; j++) {
      const x0 = i * gridSize;
      const y0 = j * gridSize;
      const dist = Math.sqrt(i*i + j*j);
      let t = (time - dist * config.phaseStrength) % 1;
      if (t < 0) t += 1;
      const easedT = ease(t);
      const scale = 1 / Math.pow(2, easedT);
      const x = cx + x0 * scale;
      const y = cy + y0 * scale;
      const size = gridSize * scale;
      if (x > -size && x < width + size && y > -size && y < height + size) {
        drawCell(x, y, size, easedT);
      }
    }
  }
  time += config.speed;
  requestAnimationFrame(animate);
}
window.addEventListener('resize', init);
init();
animate();

Ad #1

Ad #2