JavaScript library to make drawing animation on SVG - maxwellito/vivus
Multiple Animation Types
Choose from delayed, synchronous, or one-by-one animations to enhance visual storytelling.
Easy Integration
Integrate with minimal dependencies and straightforward setup for inline or dynamic SVGs.
Customizable Animation Scripts
Create unique animation flows tailored to specific design needs.
Path Transformation Support
Automatically transform SVG elements into path elements to enable animation.
Vivus is a JavaScript library specifically designed to animate SVG graphics, giving the illusion of hand-drawn animations. It operates by manipulating the strokeDashoffset property of SVG paths, allowing for various animation styles including sequential and simultaneous drawings. The library is lightweight, requires no dependencies, and can be integrated seamlessly into web projects. It also includes a feature for transforming standard SVG shapes like circles and rectangles into paths, ensuring compatibility with the animation effects.
The library is available via NPM, Bower, and CDN. It supports various animation types and provides an easy setup process for both inline and external SVG files.
Enhancing web applications with animated illustrations.
Creating engaging presentations or educational content using SVG animations.
Adding visual interest to landing pages and marketing materials.
Vivus is used to create drawing animations on SVG elements, making web graphics more dynamic.
You can integrate Vivus by including it via NPM, Bower, or using a CDN link, and initiating it with a simple script.
Vivus primarily animates path elements; other shapes must be transformed into paths for animation.
