vivus

animation visualization

vivus is a JavaScript library that allows for the dynamic drawing animation of SVG graphics. It enables the animation of SVG elements to appear as if they are being drawn on the screen in real-time.

Latest Ver 0.4.6

Homepage

Github

15,465

Capturing the breath of moments.

Powerful animations that infuse your webpage with vibrancy.

A JavaScript animation library for making SVG elements appear as if they are being drawn in real-time

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.js

https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js

https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js.map

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<svg id='my-drawing' xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
  <path fill='none' stroke='black' stroke-width='2' d='M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80'/>
</svg>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js"></script>

⚙️ JavaScript
new Vivus('my-drawing', { duration: 200, type: 'oneByOne' });