v149 · CSS · Path Length Override

Path Length Override

The same SVG path with different path-length values and the same stroke-dasharray. The virtual path length scales how many dashes fit: a low path-length means fewer, larger dashes; a high value means more, smaller ones — without changing the actual geometry.

How it works: stroke-dasharray: 5 5 means "5 units on, 5 units off". But "units" are measured against path-length, not the geometric length. If path-length: 50 and the real path is 300px long, each "unit" is 6px — so 5 units = 30px dashes. Changing path-length rescales all dash values proportionally.

same dasharray, different path-length

All three use stroke-dasharray: 5 5. Only path-length differs.

path-length: 50

path-length: 50;
stroke-dasharray: 5 5;
/* ~4–5 dashes */

path-length: 100

path-length: 100;
stroke-dasharray: 5 5;
/* ~8–10 dashes */

path-length: 200

path-length: 200;
stroke-dasharray: 5 5;
/* ~16–20 dashes */

loader rings using path-length: 1

path-length: 1 makes stroke-dasharray a simple fraction of the circle. No geometry math needed.

25% filled

path-length: 1;
stroke-dasharray:
  0.25 0.75;

50% filled

path-length: 1;
stroke-dasharray:
  0.50 0.50;

75% filled

path-length: 1;
stroke-dasharray:
  0.75 0.25;

code

/* Progress ring — no geometry math, just fractions */
circle.progress {
  path-length: 1;                /* virtual length = 1 */
  stroke-dasharray:
    var(--progress) calc(1 - var(--progress));
  /* 0.3 = 30%, 0.7 = 70% gap */
  transform-origin: center;
  transform: rotate(-90deg); /* start from top */
}

/* JS: just update one custom property */
circle.style.setProperty('--progress', '0.65'); /* 65% */

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗