mobile friendly | responsive | and tiny (8kb gzip)
Follow these three easy steps to start animating svg paths.
Export your line art from Illustrator as an .SVG
Ensure there are no fills,
No closed paths - Line needs a start and end,
Crop Artboard nice & tight!
Drop your .SVG file
'SVG to Lazy Converter'.
& Copy the .JS code.
Each paths duration can be tweaked in the code!
Import Lazylinepainter. Paste Lazyline code with'in DOM ready function & publish - Boom!
The Convertor is a free online tool
that prepares your svg for Lazy line to animate.
Upload your SVG as per the instructions above in 'HOW IT WORKS'.
Processing your SVG will only take a few seconds.
Play with stroke-width and color settings.
Once ready copy the code!
For further documentation and examples,
draws line through path
Clear path - paint can still be
called on the element after it has been erased
Pause path animation
Resume path animation
Sets path position,
second param accepts a number between 0 - 1;
Returns all lazylinepainter data;
Remove path - removes lazyline data and emptys element from DOM.