v150 · css · svg

Path-length interpolation

Because path-length is a numeric CSS property, it now participates in CSS's animation model — transition, @keyframes, and the cascade — where the pathLength attribute could previously only be animated with SVG SMIL. This page interpolates it between 100 and 20 and proves it with sampled computed values and the visibly re-scaling dash pattern.

Checking CSS.supports('path-length: 100')…

Interpolate path-length

No interpolation has run.

code path

#wave { stroke-dasharray: 10 10;   /* consumed in path-length units */
        path-length: 100; transition: path-length 2s linear; }
#wave.compressed { path-length: 20; }
@keyframes breathe { from { path-length: 100; } to { path-length: 20; } }

/* proof of interpolation: sample the computed value mid-flight */
getComputedStyle(wave).getPropertyValue('path-length'); // e.g. "63.4"

see also