v149 · CSS · SVG

CSS path-length

The path-length CSS property maps to the SVG pathLength attribute, letting you control stroke-dash normalisation via the CSS cascade — enabling pure-CSS animated SVG paths with clean math.

concepts

  1. Stroke Animator

    Control path-length interactively and see how it rescales stroke-dasharray / stroke-dashoffset — the normalised coordinate system makes percentage-based dash patterns trivial.

  2. Progress Rings

    Pure-CSS circular progress indicators driven by CSS custom properties and path-length: 100 — no JavaScript dash arithmetic, just stroke-dashoffset: calc(100 - var(--pct)).

  3. Draw on Path

    Pick a shape (heart, star, wave, zigzag, spiral) and drag a progress slider to draw its stroke using stroke-dasharray in normalised coordinates. Set path-length: 100 and percentages just work — no getTotalLength() needed.

  4. Signature Draw

    Cursive letter-by-letter stroke animation — each letter path uses path-length: 100 so the draw animation is a single stroke-dashoffset: 100 → 0 keyframe, identical for every letter regardless of its actual pixel length. No JS length measurement needed.

  5. Animated Chart

    Bar and line chart where every SVG path uses path-length: 100 and animates from stroke-dashoffset: 100 to 0 — identical keyframes for every bar or line regardless of actual pixel length. Switch between bar and line mode; hit Animate to replay the draw-on reveal.

  6. Multi-path Sync

    Six shapes with wildly different pixel path lengths — circle, star, wave, lightning bolt, arrow, infinity — all sharing a single CSS keyframe. pathLength="100" normalises every shape so stroke-dashoffset: 100 → 0 draws them in perfect sync. A reference table compares actual pixel lengths vs the uniform normalised length, and shows that getTotalLength() is never needed.

why it shipped

SVG's pathLength attribute has long enabled a handy trick: set pathLength="100" and your stroke-dasharray values become simple percentages rather than pixel lengths computed in JavaScript. The problem was that pathLength could only be set as a presentational attribute — not via CSS — so it was invisible to the cascade and couldn't participate in transitions or responsive overrides. The new path-length CSS property fixes this: it maps to the same underlying attribute, can be set in any stylesheet, inherits cascade rules, and is animatable with transition or @keyframes. Combined with CSS custom properties, it makes "draw on demand" SVG animations a one-liner.

references