Data-viz / scrollytelling · 12.3
Scroll-driven self-drawing chart line
A seismograph running in real time.
A chart line drawing itself as you scroll, and the data table underneath it that makes that legal.
4 knobs
How it actually works
The mechanism takes an afternoon to learn and a minute to write. The thing worth arguing about is the table below the chart. A drawn path is not data, it is a shape that resembles data, and the index is unusually blunt about this: for a chart, the accessible text equivalent is not optional. So on this page the table is not tucked into an aria-label. It is on the stage, in the design, always visible, because that is the version that actually survives a redesign.
stroke-dasharray is set to the path's own length, read at runtime with getTotalLength(), and stroke-dashoffset walks from that length to 0. The line is not being revealed by a mask; the dash gap IS the undrawn part. It only works on stroked paths, never on fills. Fully vanilla: getTotalLength() plus a custom property plus animation-timeline: scroll() is zero libraries, and even the JS form is four lines.
The knobs, named
Draw range, direction awareness, dash pattern, stroke width. Direction awareness is the one that turns a drawing into a state machine: with it off, the line latches once drawn and scrolling back does nothing.
| Knob | Source | What it teaches |
|---|---|---|
| Draw range | sourced | What fraction of the scroll the draw consumes. Below 1 the chart completes before the section leaves, which is nearly always what you want. |
| Direction awareness | sourced | On: the line unfills as you scroll back, so it is a function of position. Off: it latches at its maximum and never retreats, so it is a trigger with extra steps. |
| Dash pattern | sourced | The guide line under the drawn one. It cannot be applied to the drawn line itself: the dasharray IS the draw mechanism, and this is the constraint everyone hits on day one. |
| Stroke width | sourced | Thickness of the drawn line. At the wide end you can see the round cap arriving, which is a good way to prove it really is a stroke being paid out. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
CSS-Tricks "Scroll Drawing" and "How SVG Line Animation Works"; Codrops "Scroll-Driven SVG Graph Animation with GSAP". The index labels this INFERRED and it is not upgraded here. The dedupe note matters too: index 1.12, 12.3 and 12.5 are one mechanism, counted once and built twice, as a chart and as a thread.
- Seen on
- CSS-Tricks; Codrops SVG graph animation.
- Dependencies
- vanilla
- Difficulty
- trivial-to-moderate
- Performance
- Very cheap: one property write per frame. SVG stays real DOM, so it remains inspectable and labelable.
- Accessibility and the floor
- For a chart the drawn line MUST have a text or table equivalent. This is not optional and it is the one place in this catalog where the accessible version is also the correct version: the table is the data, the path is a picture of it.
Notes
Composability. Put it in the sticky slot of 12.1 and you have the Pudding pattern in full: steps on the right, a chart drawing itself on the left.