v149 · CSS · SVG
Draw on Path
The path-length property normalises the coordinate space for stroke-dasharray animations. Set path-length: 100 and your dash offsets work in percentages of the path — no geometry math, no JavaScript getTotalLength() calls.
choose a shape
/* select a shape and drag the slider */
With
path-length: 100, the stroke-dasharray 0 100 = invisible, 50 100 = half drawn, 100 0 = fully drawn. You write percentages; the browser converts to actual SVG units. No more path.getTotalLength() in JS.
see also
- Progress Rings — circular progress indicators using path-length
- Stroke Animator — animate complex path strokes
- Feature index