v149 · CSS · demo

Stroke Animator

Move the sliders to see how path-length normalises the stroke-dash coordinate system. When path-length: 100, a stroke-dashoffset of 75 means "75% along the path" — no JavaScript geometry needed.

Checking CSS path-length support…
Circle
Fill %75
path-length: 100; stroke-dashoffset: 25
Rectangle
Fill %60
path-length: 100; stroke-dashoffset: 40
Star path
Fill %50
path-length: 100; stroke-dashoffset: 50
Squiggle
Fill %90
path-length: 100; stroke-dashoffset: 10
/* Chrome 149+: set path-length via CSS — no SVG attribute needed */
circle {
  path-length: 100;          /* normalise coordinate system to 0–100 */
  stroke-dasharray: 100 100; /* total fill + gap */
  stroke-dashoffset: 25;     /* 75% filled (100 - 75 = 25) */
  transition: stroke-dashoffset 0.3s ease;
}

/* Update fill via custom property — no geometry computation */
circle { --pct: 75; stroke-dashoffset: calc(100 - var(--pct)); }

see also