SVG That Draws Itself, With No Library
Two CSS properties and one line of JavaScript produce the most impressive effect in the template.
The self-drawing line at the end of the scroll story looks like it needs an animation library. It needs stroke-dasharray, stroke-dashoffset and a call to getTotalLength().
How It Works
A dashed stroke where the dash is exactly as long as the path, offset by that same length, renders as nothing at all. Transition the offset to zero and the stroke appears to draw itself from one end.
Getting the Length Right
Hard-coding the dash length breaks the moment anyone edits the path. path.getTotalLength() returns the real length at runtime, and we write it into a CSS custom property so the stylesheet stays in charge of the timing.
Triggering It on Scroll
An IntersectionObserver adds a class when the SVG is half visible, and the class sets the offset to zero. The transition duration and easing live in CSS, which means a designer can retune the feel without touching any JavaScript.
The Reduced-Motion Branch
If reduced motion is set, the class is added immediately for every path and the transition is disabled. The line is simply there, complete, with no drawing. That is the correct outcome — the illustration still communicates, it just does not perform.