v149 · CSS · SVG
Animated Chart
With path-length: 100, animating a chart bar or line is just stroke-dashoffset: 100 → 0 — no getTotalLength(), no path math, no JavaScript-calculated percentages. Each bar or line draws itself purely through CSS, regardless of its actual pixel length.
Click "Animate" to draw the chart using
stroke-dashoffset on paths with path-length: 100.
The key: set
path-length: 100 on the SVG element, then animate stroke-dasharray: 100 → stroke-dashoffset: 0 via CSS transition. Every bar and line segment uses the exact same CSS keyframe — the browser normalises each path's coordinate system to 0–100, so percentages always work.
see also
- Stroke Animator — interactive normalised dash patterns
- Progress Rings — pure-CSS circular progress
- Draw on Path — shape draw-on with slider
- Signature Draw — letter-by-letter cursive animation