demo · v149
Multi-path sync
Without pathLength, synchronizing stroke-draw animations across multiple SVG paths requires measuring each path's pixel length with getTotalLength() and building custom stroke-dasharray values per path. With pathLength="100", every path uses the same normalised coordinate system — one CSS keyframe drives all of them in perfect sync.
Every path below uses
pathLength="100" regardless of its actual pixel length. The CSS animation (stroke-dashoffset: 100 → 0) is identical for all. Hit Animate all and all six shapes draw together at exactly the same rate.
Duration:
1.5s
Circle
px length: —
Star
px length: —
Wave
px length: —
Lightning
px length: —
Arrow
px length: —
Infinity
px length: —
| Shape | Actual pixel length | pathLength attr | stroke-dasharray / offset | getTotalLength() needed? |
|---|---|---|---|---|
| Measuring… | ||||
/* Without pathLength: you must measure each path in JS first */
const circle = document.querySelector('#circle');
const star = document.querySelector('#star');
const wave = document.querySelector('#wave');
circle.style.strokeDasharray = circle.getTotalLength(); // ~238px
circle.style.strokeDashoffset = circle.getTotalLength(); // ~238px
star.style.strokeDasharray = star.getTotalLength(); // ~347px
star.style.strokeDashoffset = star.getTotalLength(); // ~347px
// ... and so on for every shape. Different dasharray per shape
// means you can't use a single CSS keyframe for all.
/* With pathLength="100": one keyframe, all shapes in sync */
/* ─── SVG ─── */
<circle pathLength="100" ...>
<path d="..." pathLength="100">
/* ─── CSS ─── */
.draw-path {
stroke-dasharray: 100; /* same for every shape */
stroke-dashoffset: 100; /* same for every shape */
animation: draw-on 1.5s ease forwards;
}
@keyframes draw-on {
to { stroke-dashoffset: 0; } /* one rule, all shapes */
}