demo · v149

Dash Pattern Normalizer

The core value of path-length is normalised dash patterns: give every shape the same pathLength and a single stroke-dasharray: 10 10 produces visually consistent dash density across shapes with wildly different geometric lengths. Without normalisation, matching dash density across shapes requires getTotalLength() and JavaScript arithmetic.

All six shapes share pathLength="100" set via CSS path-length: 100. The same stroke-dasharray value produces equal visual dash density on all of them — a circle with a 400px circumference and a tiny zigzag with a 30px length both show the same gap-to-dash ratio.
Dash size: 8
Gap size: 4
Normalise:

Circle

Geometric: ~283px
Normalised: 100

Star

Geometric: ~360px
Normalised: 100

Zigzag

Geometric: ~178px
Normalised: 100

Spiral

Geometric: ~295px
Normalised: 100

Long Line

Geometric: ~400px
Normalised: 100

Heart

Geometric: ~340px
Normalised: 100
/* CSS path-length normalisation — all shapes share the same dash pattern */ path, circle { path-length: 100; } /* stroke-dasharray: 8 4; = consistent visual density on all shapes */

Without normalisation — must compute per-shape

const ratio = 8 / 100; // 8% dash
const shapes = document.querySelectorAll('path, circle');
shapes.forEach(el => {
  const len = el.getTotalLength(); // JS required!
  el.style.strokeDasharray =
    (len * ratio) + ' ' + (len * 0.04);
});

With path-length: 100 — one CSS rule for all

/* CSS only — no JavaScript needed */
path, circle {
  path-length: 100;
  stroke-dasharray: 8 4; /* same for every shape */
}
/* Geometric lengths: circle=283px, star=360px… */
/* Visual dash density: identical on all          */
/* path-length in CSS (Chrome 149) normalises the coordinate space for
   stroke-dasharray and stroke-dashoffset calculations.

   Setting path-length: 100 on an element is equivalent to setting
   the SVG pathLength="100" attribute, but now settable in stylesheets
   and participates in the cascade.

   The effect: all stroke-dash values are interpreted in units where
   the total path = 100, regardless of the actual pixel length.      */

path.circle  { path-length: 100; /* actual: 283px */ }
path.star    { path-length: 100; /* actual: 360px */ }
path.zigzag  { path-length: 100; /* actual: 178px */ }

/* ONE rule applies consistent visual dash density to all shapes: */
path { stroke-dasharray: 8 4; }

see also

implementation reference

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