MicroLibrary for SVG Shape Length in a CSS Var
stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations.
Add Lengthy to a projects with npm:
npm install -s lengthy-svg
For easy embedding on platforms like Codepen, use unpkg
Lengthy on a specific element, list of elements or a selector. The affected elements will receive a CSS var in their
style and the
lengthy class added.
For a standard line-drawing animation, this is the CSS required.
It should be a relatively simple setup, but unfortunately, Chrome/Blink has a glitch with the CSS var animation keyframes. Chrome incorrectly treats a unitless
var() animation as a "discrete" animation, snapping to each value instead of transitioning between the values.
Firefox and Webkit/Blink all use unprefixed
animation-name, so to target Webkit/Blink specifically, you'll use
-webkit-animation-name for the override, then
-moz-animation-name to override back for Firefox.
@90%,100%}/*** Webkit does not support animating the stroke-dashoffset value _without_ a unit,* so we have to deliver a separate keyframe list via -webkit-animation-name*/@90%,100%}
const targets = ;const tweens = targets;const t1 =;t1;t1;