A Modern JS library for SVG path animation

Quick Start | How it Works | Composer

Quick start

npm install lazy-line-painter

                  import
                  LazyLinePainter
                  from
                    'lazy-line-painter'
                
                  let el =
                  document.querySelector('#my-svg')
                
                  let config = {
                  strokeWidth : 10 }
                
                  let myAnimation
                  =
                  new
                  LazyLinePainter(el, config)
                
                  myAnimation.paint()
                      // For Documentation please visit Github
                    
                    🎉

Lazy Line Painter can be setup with minimal effort as per these Quick Start instructions. And with the initialisation config and playback options anything is possible.

However, to achieve the most interesting results the library is best used in conjunction with the Lazy Line Composer below. The Lazy Line Composer is a GUI specifically developed for SVG path animation.

LAZY LINE COMPOSER beta

The Lazy Line Composer is an online tool that helps prepare your SVG for animation. Processing your SVG will only take a few seconds. Download your composition when complete! Your zip file will contain the lazy-line-painter lib and your production ready animated svg.

Please visit desktop to use the LAZY LINE COMPOSER

feedback

Download Zip

Styling options

stroke width 1

stroke opacity 1

stroke color

default

stroke dash

default

default
1, 1
2, 2
5, 5

stroke join

default

default
miter
arcs
bevel
miter-clip
round

stroke cap

square

default
butt
square
round

hide fill

true

Animation options

delay (ms) 0

duration (ms) 500

ease

Linear

Linear
InQuad
OutQuad
InOutQuad
InCubic
OutCubic
InOutCubic
InQuart
OutQuart
InOutQuart
InQuint
OutQuint
InOutQuint
InSine
OutSine
InOutSine
InExpo
OutExpo
InOutExpo
InCirc
OutCirc
InOutCirc
InBounce
OutBounce
InOutBounce

draw sequentially

true

reverse

false

repeat

HOW IT WORKS

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!

.SVG

Drop your .SVG file
into the 'Lazy Line Composer'.
Each paths duration can be tweaked in the code!

.ZIP

Download the zip, containing your animation code. Html and JS included
Boom!