Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.
Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.
Each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`.
Each path element is drawn one after the other. This animation gives the best impression of live drawing.
To give more freedom, it's possible to override the animation of each path and/or the entire SVG. It works a bit like the CSS animation timing function. But instead of using a cubic-bezier function, it use a simple JavaScript function. It must accept a number as parameter (between 0 to 1), then return a number (also between 0 and 1). It's a hook.
Here an example test to play around with the different properties available.
Type
Path timing function
Anim timing function
This feature allows you to script the animation of your SVG. To do this, the custom values will be set directly in the DOM of the SVG.
Here is an example using scenario-sync.
I would recommend you look at the source code and the readme file for more information.
Play with it on Vivus instant.
More information and documentation on GitHub.
Thanks for watching.
Made with love a keyboard