SVG Pixel Animation

A Lottie or MP4 can play an intro. It cannot give you a pixel to point at.

Rects

Canvas can, but scaling gets blurry. SVG keeps each cell as a rect I can tween. The letters began as SVG paths. Each pixel is a square in the path: move, draw three sides, close. I take the top-left of every square and draw a real rect there, 13.8581 units on a side, so each cell is something I can fade on its own. No animation library — every rect gets its own el.animate().

Fill

The delay is the motion. Each rect starts at opacity: 0 and animates back to 1 over 1ms, with a delay of 100 + i * 4ms. What you read is the ladder of delays, not the tween. The mark at the top is shuffled first, so it fills as noise. In DOM order, the same ladder reads as a wipe. Under prefers-reduced-motion the intro is skipped and the mark is simply there.

const order = fill === "wipe" ? rects : shuffle(rects);

order.forEach((rect, i) => {
  rect.style.opacity = "0";
  rect.animate([{ opacity: 0 }, { opacity: 1 }], {
    duration: 1,
    delay: 100 + i * 4,
    easing: "linear",
    fill: "forwards",
  });
});

Pointer

pointerover fades a rect to 0 in 150ms on ease-out-cubic. Once 15 are gone, every rect comes back over 300ms on the same curve, staggered 3ms each in a fresh shuffle, so the holes do not fill in the order they were made and the mark never empties. Touch and pen come in through pointerdown; the mouse is left to pointerover, so a click does not erase twice.