v149 · CSS · Stroke Animation Demo

Stroke Animation Demo

Two paths draw the same curve: the black one uses the CSS path-length property (Chrome 149+), the blue one uses the SVG pathLength attribute. Both achieve the same animation — but the CSS approach requires no SVG markup changes and composes with custom properties and media queries.

Checking path-length CSS support…

draw animation

CSS path-length property (Chrome 149+) SVG pathLength attribute (all browsers)
1.00

code

/* Chrome 149+: set path-length entirely in CSS */
.drawn-path {
  path-length: 1;              /* virtual total length = 1 */
  stroke-dasharray: 1;         /* one full dash of length 1 */
  stroke-dashoffset: 1;        /* hidden: offset pushes dash off path */
  animation: reveal 2s ease-in-out forwards;
}

@keyframes reveal {
  to { stroke-dashoffset: 0; } /* 0 offset = fully drawn */
}

/* Works with custom properties and calc() */
.loader {
  --progress: 0.3;             /* 30% drawn */
  path-length: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--progress));
}

see also

implementation reference

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