v150 · CSS · SVG

Dash-Driven Progress Along a Path

The reason path-length exists. Set path-length: 1000 and the whole path is normalized to a fixed total — so stroke-dasharray: 250 is exactly 25% of the path, on any shape, with zero JavaScript measuring.

42% drawn → stroke-dasharray: 420 / 1000 (of path-length: 1000)
path-length: 1000
path-length (CSS)1000
drawn dash420
geometric length (getTotalLength)—
computed path-length—

how it works

/* One declaration normalises any path to a fixed total. */
path {
  path-length: 1000;        /* CSS property (Chrome 150) — replaces pathLength="" */
}

/* Now dash math is in normalized units — 250 of 1000 = exactly 25%. */
.progress {
  stroke-dasharray: 250;     /* drawn segment  */
  stroke-dashoffset: 0;      /* slide it along the path */
}
/* Animate progress purely in CSS — no getTotalLength() JS: */
@keyframes draw { to { stroke-dashoffset: -1000; } }

Before path-length, the only way to drive a dash-based progress meter was element.getTotalLength() in JavaScript, set both stroke-dasharray and stroke-dashoffset to that measured length, then recompute on every resize. With path-length the normalization happens in the browser, so the dash values stay human-readable and resize-safe.

see also