Draw-on (stroke-dashoffset)
An SVG line that reveals itself from one end to the other, as if a pen is drawing the path live.
See it
What it is
Draw-on makes an SVG stroke appear to grow along its path. Set 'stroke-dasharray' to the path length, offset that dash by the same amount with 'stroke-dashoffset', then animate the offset to zero. The visible dash slides into place and reads as a pen tracing the line.
Reach for it on signatures, route maps, line icons, and outline logos where drawing order carries meaning. SVGGeometryElement.getTotalLength() gives each path its measured length, which matters when several paths of different sizes need to move at a consistent apparent speed. Jake Archibald's 2013 post 'Animated line drawing in SVG' is where most people first met the trick; GSAP's DrawSVGPlugin automates the measuring.
Gotcha: this reveals strokes, not fills. A filled logo needs a separate fade or mask after the outline finishes. Rounded linecaps visibly extend past the measured dash, and multiple paths need deliberate ordering or they all draw at once. Show the finished artwork immediately under reduced motion.
Ask AI for it
Create a draw-on animation for these SVG paths. For each path, call SVGGeometryElement.getTotalLength(), set 'stroke-dasharray' and 'stroke-dashoffset' to that length, then animate 'stroke-dashoffset' to 0 with CSS @keyframes. If you use round linecaps, add the stroke width to the measured dash length so the cap does not peek out before the draw starts. Use a constant apparent drawing speed of 180 pixels per second, and stagger each path so it begins when the previous path is 80 percent complete. Keep fills transparent until their stroke finishes, then fade each fill in over 150ms. Set the final artwork directly with no animation under 'prefers-reduced-motion: reduce'.