SVG Pixel Animation

Hover a square to set its opacity to 0. The rest is the setup that makes that possible.

Why SVG

A Lottie or MP4 can play an intro. It cannot give you a pixel to hover. Canvas can, but scaling gets blurry. SVG keeps each cell as a rect I can tween.

Letter paths are already grids of M H V Z squares. Parse the origin of each square, then draw rects at 13.8581.

function parseBlocks(d: string) {
  const blocks = [];
  const re = /M([\d.]+) ([\d.]+)H[\d.]+V[\d.]+H[\d.]+V[\d.]+Z/g;
  let match;

  while ((match = re.exec(d))) {
    blocks.push({ x: +match[1], y: +match[2] });
  }

  return blocks;
}

Intro

Shuffle the rects, then stagger opacity at 4ms each. Tween duration is 0.001, so the stagger is the motion. In DOM order this reads as a wipe. Shuffled, it fills as noise. It runs once.

const shuffled = [...rects].sort(() => Math.random() - 0.5);

gsap.to(shuffled, {
  opacity: 1,
  duration: 0.001,
  stagger: { each: 0.004, from: 0 },
  ease: "none",
});

Hover

mouseenter tweens opacity to 0 in 150ms with power1.in. After 15 rects are gone, restore in 300ms with power2.out and stagger from: "random" so holes do not pop back and the mark does not empty.