ECG Ribbon
I wanted one moving line in the hero that felt alive rather than decorative, something with a pulse to it. So I drew a single SVG path as a ribbon whose width tapers along its tail. The head reads as the "now" and everything behind it fades into the past.
One path, many slices
The waveform is a single <path>. Instead of stroking it once, I append 70 <use> clones of that path into a group, and each clone reveals only a tiny slice of the curve through a stroke-dasharray gap. The slices tile the whole length together, but because each one is independent I can give every slice a different width.
The tapering tail
A widthAt() function maps "distance behind the head" to a stroke width with a quadratic falloff. The slice nearest the head gets the full width of about 6px, and slices further back thin out to nothing by around 980 units. That quadratic curve is what makes the tail feel like it is dissolving rather than just being cut off.
Painting and erasing
Each cycle, I run a head position along the total path length. As the head advances, the visible window (head minus tail length) slides along with it. When the head reaches the end, the tail keeps sliding until it too leaves the path, and then the cycle restarts. No frame ever clears the whole thing; I just re-measure the slices every tick.
Paused when unseen
An IntersectionObserver watches the hero. The moment it scrolls out of view I stop advancing the requestAnimationFrame loop, so the trace costs nothing while you read the rest of the page. It picks up right where it left off when the hero comes back.