Articles @

All the web knowledges related articles that might be feeding your brain.

The automated animation for SVG - vivus.js

Posted on:

The website's goal is to effectively provide consumers with information. The website's goal has been evolving, though. It may be used to send information or to place an order for food, clothing, and other items. Users' interactions with websites are increasingly important today. As a result, it is essential to make the site design more distinctive and appealing for a variety of uses. From the simple, basic web design with a white backdrop and black text, which has improved through time, users today want to see something interesting. From this point on, vivus.js is shown. We'll now go through what vivus.js is and how to use it on our website using the simple example.



Vivus.js is a lightweight JavaScript class which use to animate SVG like hand drawn. You may choose from a range of various animations and even write your own script to draw your SVG as you like.

There are 3 animation types, delayed, sync and OneByOne.

DelayedThere is a brief delay at the beginning before every route element is rendered simultaneously. This animation is presently the default one.
SyncLines are drawn simultaneously. The word "sync" refers to the fact that they all begin and end at the same time.
OneByOneThe path components are drawn one after another. The finest representation of live sketching is provided by this animation.

It is possible to alter the animation for each path or the full SVG in order to provide additional flexibility which similar to the timing function for CSS animations. But it uses a straightforward JavaScript function rather than a cubic-bezier one. It must take a parameter of a number (between 0 and 1) and return a number (also between 0 and 1).

There are 5 path timing function and anim timing function -

  1. linear
  2. ease
  3. ease-in
  4. ease-out
  5. ease-out-bounce

Let's practise now that we know what it's all about and how it functions!


Practical section

As vivus.js require SVG format, in this scenario, I'm using Figma to create an outline with SVG format.

To create a white text with white outline, place a darker color as the backgroud. Type anyword you like and make minor setting on the text spacing, font-size and etc.

Then, select the text, right-clicked and outline the text.

You can now check the outline had been extracted (the blue highlighted outline around the alphabets).

Create some settings for the outline (stroke), as it is what we need to animate the image
Color: white
Change outside to center
Stroke weight: 3

To make the fill empty, delete the fill.

Finally, right-click the text selection and choose to copy it in SVG format. You've reached the halfway point!

Now, in any text editor, create a simple HTML tag with simple CSS elements. Paste the copied SVG to the body, you will see a long numbering close with <svg></svg> tag.

Then, make sure you include the vivus.js file or use the CDN. Get the example code of animation and change with different setting. Let us have a look for different setting.

  1. The delayed, default setting.

  2. The oneByOne with 600 duration, and EASE for animTimingFunction.

  3. The sync with 300 duration, and EASE_OUT_BOUNCE for animTimingFunction.

This makes it easy to generate complex hand-drawn pictures that add appeal to site design. To learn more, visit the official vivus.js website.

Share this page
Back to articles list