SVG Stroke Draw Animation

CSS / Animation

CSSSVGAnimationstroke-dasharraystroke-dashoffset

Context

The Don Norman diagram needed each connecting edge to draw in sequentially as users scrolled. The path draw technique — measuring each edge with `getTotalLength()` and animating `stroke-dashoffset` — produces the effect without any animation library.

The Concept

`stroke-dasharray` sets a dash equal to the path's total length. `stroke-dashoffset` shifts that dash offscreen. Animating the offset from full-length to `0` makes the path appear to draw itself.

References

MDN — stroke-dasharray MDN — stroke-dashoffset CSS-Tricks — How SVG Line Animation Works

Scoping transition-property clip-path Reveal Transitions

Task

The circle's circumference is 251px. `stroke-dasharray` and `stroke-dashoffset` are already set to 251 — the stroke is one full-length dash, offset completely offscreen. Add a `@keyframes draw` rule that animates `stroke-dashoffset` to `0`, then apply it to `.path` with a 1.5s duration and `forwards` fill mode.

styles.css

Hints0/3 revealed