Animated graph line draw

An SVG line graph draws itself in from left to right as it enters the viewport. Used for revenue charts, metrics, growth illustrations.

Live demo

CSS

.graph-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* Critical: dasharray = path length, dashoffset = path length.
     Animate dashoffset to 0 to "draw" the line. */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

The technique

SVG paths support stroke-dasharray (the length of dashes) and stroke-dashoffset (where the dash pattern starts). If you set both to the path's full length, the line is invisible. Animate dashoffset to 0 and the line "draws" from start to end.

For dynamic path lengths, use JavaScript: path.getTotalLength() to compute.

Trigger on scroll

The above runs on page load. To trigger when the graph enters viewport, wrap in IntersectionObserver — same pattern as tile #17 (reveal on scroll). Add a class like .is-drawing when intersecting; only that class has the animation.

Layered effects

The demo shows three timed steps:

1. Line draws in (0–2.2s).
2. Fill area fades in below the line (1.5s–2.5s).
3. End dot pops in (2s–2.4s).

Staggering these creates a sense of build-up — the line arrives, then the area context fills in, then the punctuation dot lands.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.