Lengthy
MicroLibrary for SVG Shape Length in a CSS Var
Lengthy is a JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset
for the wonderful line drawing SVG technique and other interesting animations.
Installation
Add Lengthy to a projects with npm:
npm install -s lengthy-svg
For easy embedding on platforms like Codepen, use unpkg
--
Usage
Simply call 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.
Input
JavaScript
;
Output
CSS Animation
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 calc()
'd 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% }
--
JavaScript Animation
Lengthy will return an array containing all the elements affected and their lengths if you want to use a JavaScript animation library like TweenRex or use the length data for other purposes.
const targets = ; const tweens = targets; const t1 = ;t1;t1;