Lines, signatures, logos and underlines that draw themselves on scroll using the stroke-dasharray trick. Pure CSS — no library needed.
An SVG path animates from invisible to fully drawn, as if a hand is sketching it in real time. The technique works on anything you can draw as an SVG path: a signature, a logo outline, decorative underlines, mountain ranges, line charts, illustrated icons. The reveal feels organic and editorial — perfect for portfolio sites, brand pages, and case studies.
The trick uses two CSS properties: stroke-dasharray defines a long dash equal to the path's total length, and stroke-dashoffset shifts that dash off the visible area. So initially, the entire path is "in the gap" and invisible. Transitioning stroke-dashoffset back to 0 walks the dash into the visible area, drawing the path. You need the path's getTotalLength() JS value (or just use a number larger than any reasonable path, like 2000, and round). IntersectionObserver fires the draw on scroll.
Scroll inside. Each path draws itself when it enters view.
Hand-drawn underline used as a custom emphasis under a key phrase.
Drawing-style signature commonly used at the bottom of editorial pieces and brand homepages.
Line charts that draw left-to-right on scroll are an excellent way to make data feel narrative.
A geometric logo outline drawn as a single sequence. Often used for splash screens and logo reveals.
Build an SVG path-drawing animation triggered on scroll. For each SVG path you want to animate, give it class="draw" with these CSS properties: fill:none, stroke:accent-color, stroke-width:2.5, stroke-linecap:round, stroke-dasharray:var(--len), stroke-dashoffset:var(--len). Initial state: the entire path is "in the gap" so invisible. On JS load, for each .draw path, call path.getTotalLength() and set its --len custom property to that value (so dasharray and dashoffset match the path exactly). Use IntersectionObserver on each parent container — when the container enters view (threshold 0.3), add an .in class that transitions stroke-dashoffset to 0 over 2.2 seconds with cubic-bezier(0.65, 0, 0.35, 1). Demonstrate four variations: (1) a wavy underline under a key phrase, (2) a script "signature" with looping curves, (3) a line-chart polyline that draws left-to-right, (4) a geometric logo combining a diamond path + an inscribed circle. Unobserve after first trigger.