09 / Scroll-driven

Path Drawing

The line draws itself as you arrive, as though someone were tracing it in front of you.

also called stroke-dashoffset scrub · line draw · SVG path reveal

The robustness trick is pathLength="1": it normalises any path to a length of one, so the same two lines of CSS draw any shape without measuring it in JavaScript first.

How it is built

path { pathLength: 1; stroke-dasharray: 1; stroke-dashoffset: 1 } animation-timeline: view(); animation-range: entry 5% cover 50%;