path-length CSS property

concepts

1. Stroke Animation Demo

   Animate SVG stroke-dashoffset to draw paths. With CSS path-length, you set the normalized length (e.g. 100) in a stylesheet and compute dasharray offsets against that fixed unit — no measuring path lengths at runtime.

2. Path Length Override

   Compare a path with its native length vs an overridden path-length. Shows how different path-length values scale the effective stroke-dasharray units, useful for creating repeating patterns at a consistent visual density.

3. Signature Animator

   Draw-on animation for four SVG path shapes — wave, loop, zigzag, heart — using path-length: 100 set in CSS (Chrome 150). The animation always runs stroke-dashoffset from 100 to 0, regardless of the path's actual geometric length. Adjust duration and stroke width live.

4. Loading Spinner

   Six spinner variants — from simple ring to multi-ring to CSS custom property parameterized — all using path-length: 100 so every @keyframes animates between 100 and 0, regardless of the shape's actual circumference. No JavaScript measurement required. Feature-detected with graceful fallback.

5. Scroll Progress

   A sticky scroll-progress bar (linear) and a floating circle indicator both driven by a scroll listener that maps the scroll percentage directly to stroke-dashoffset — possible only because path-length: 100 normalizes both shapes to the same 0–100 unit space. Comparison of pre-150 vs post-149 code shown inline.

6. Dash Pattern Normalizer

   Six shapes — circle, star, zigzag, spiral, lines, heart — each with wildly different geometric lengths (28px to 400px). With path-length: 100 a single stroke-dasharray: 8 4 rule produces identical visual dash density across all of them. Toggle normalisation off to see each shape require a different dasharray value computed from getTotalLength().

why it shipped

SVG's pathLength attribute lets authors declare a virtual path length, making stroke-dasharray values relative to that unit instead of the true geometric length. The canonical draw-on-scroll and loader animations use this: set pathLength="1", then animate stroke-dashoffset from 1 to 0. Before Chrome 150, this required the pathLength attribute on each SVG element — the attribute couldn't be set in CSS. Chrome 150 makes path-length a presentation attribute accessible from CSS, enabling stylesheet-driven control with custom properties, @keyframes, and media queries.

the CSS property

/* SVG attribute (pre-Chrome 150) */
<path d="M10 80 Q95 10 180 80" pathLength="1" />

/* CSS property (Chrome 150+) */
path {
  path-length: 1;         /* set from CSS — no attribute needed */
  stroke-dasharray: 1;    /* full dash */
  stroke-dashoffset: 1;   /* start fully hidden */
  animation: draw 2s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; } /* reveal full path */
}

/* With custom properties — easy to parameterize */
.my-path {
  --total: 100;
  path-length: var(--total);
  stroke-dasharray: var(--total);
}

references

• ChromeStatus entry
• MDN — SVG pathLength attribute
• SVG spec — pathLength