JavaScript SVG animation library – Vivus.js

JavaScript library to make drawing animation on SVG. Vivus – bringing your SVGs to life!

Vivus.js – a JavaScript SVG animation library

Vivus is a lightweight JavaScript class (with no dependencies) 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 any way we like.

Principles

To get this effect, the script uses the CSS property strokeDashoffset. This property manages the stroke offset on every line of the SVG. Now, all we have to do is add some JavaScript to update this value progressively and the magic begins. The animation always draws elements in the same order as they are defined in the SVG tag.

There are few conditions that your SVG must meet:

– All the elements must have a stroke property and cannot be filled. This is because the animation only looks to progressively draw strokes and will not check for filled colours. For example: fill: “none”; stroke: “#FFF”;

– You should avoid creating any hidden path elements in your SVG. Vivus considers them all eligible to be animated, so it is advised to remove them before playing with it. If they are not removed the animation might not achieve the desired effect, with blank areas and gaps appearing.

– Text elements aren’t allowed, they cannot be transformed into path elements. See #22 for more details.

Vivus.js - a JavaScript SVG animation library
Vivus.js – a JavaScript SVG animation library

Setup

npm install vivus

Sample

Inline SVG

<svg id="my-svg">
  <path...>
  <path...>
  <path...>
</svg>

<script>
new Vivus('my-svg', {duration: 200}, myCallback);
</script>

Dynamic load

<object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object>

<script>
  new Vivus('my-svg', {duration: 200}, myCallback);
</script>

<!-- OR -->

<div id="my-div"></div>

<script>
  new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);
</script>

License: MIT

Homepage / Docs

https://maxwellito.github.io/vivus/

GitHub

https://github.com/maxwellito/vivus

See also

SVG with JavaScript – svg.js and others

JavaScript physics animations library – dynamics.js

Finance.js – financial JavaScript calculations

Responsive charts jQuery plugin – Pizza JS

Enjoy!