Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance 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.

Animation types

• Delayed: Every path element is drawn at the same time with a small delay at the start. This is currently the default animation. • Sync: Each line is drawn synchronously. They all start and finish at the same time, hence the name sync. • OneByOne: Each path element is drawn one after the other. This animation gives the best impression of live drawing.

Timing function

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.

Scenarize

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.