SVG Drawing Animation

Animation made with vivus.js

Vivus.js is a JavaScript library that allows you to animate SVGs, giving them the appearance of being drawn with amazing effects.

SVG structure:

The order of SVG layers determines the animation sequence , the lower level will be the first in the animation.

All elements must have a stroke property and cannot be filled ( fill: “none”; ). Hidden path elements aren’t allowed in your SVG because Vivus show all hidden elements. No text elements allowed, they cannot be transformed into path elements. you must convert the font in a vector drawing.

Make SVG Responsive

The SVG comes with fixed size and do not adjust themselves to the size of the viewport by default. As a standard image, you can make a SVG vector illustration scale with the Hype content. Simply replace the width and height values, 100% + auto.

Paste the code in the inner HTML

You must check the ID of the animation. By default in Illustrator the ID is “layer_1” but you can change this name.Note: Chrome issue (version 46.x): With the height set to “auto”, in some cases, the animation don’t appear. It depends on the settings of the Iframe. Soluiton: Change the value in pixel.

3: Add a function to control the animation

Basic example:

Start the animation using a timeline action that calls the “PlayFunction” function.