v149 · CSS · SVG · path-length

Signature Animator

Draw-on animations for SVG strokes — the signature effect. path-length: 100 (set in CSS, Chrome 149) normalises the path so stroke-dashoffset can always go from 100 to 0, regardless of the path's actual geometric length. No JavaScript measurements needed.

Signature

3px

Animation

1.5s
100
/* adjust controls */

the key insight

/* Without path-length — must measure the path's length in JS:
   const len = path.getTotalLength(); // e.g. 847.3px
   path.style.strokeDasharray = len;
   path.style.strokeDashoffset = len;  */

/* With path-length: 100 (Chrome 149 CSS property) — always use 100: */
path {
  path-length: 100;          /* virtual length — set from CSS */
  stroke-dasharray: 100;     /* one dash the full virtual length */
  stroke-dashoffset: 100;    /* fully hidden */
  animation: draw 1.5s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }  /* reveal: always 0 to 100 */
}

/* Works for ANY path shape — the actual geometric length doesn't matter */

see also

implementation reference

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