Tool
Vivus
SVG path drawing animation library for line-draw interactions
About
Vivus is a lightweight JavaScript class (with no dependencies) that allows you 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 whatever way you like.
Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.
Each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`.
Each path element is drawn one after the other. This animation gives the best impression of live drawing.
Features
- SVG path draw animations
- Pricing
- Open Source
- Pricing detail
- MIT
- Platforms
- Web
Alternatives from our catalog
Tools on the same shelves as Vivus, ordered by shared tags and our own comparisons. Not vendor endorsements.
- MotiOpen Source · React Native + Web
Universal RN+web interaction library
same tags
- Animate.cssOpen Source · CSS
Simplest interaction layer on millions of sites
same tags
- React SpringOpen Source · React / web
Best-in-class interruptible spring motion; pairs with R3F
same tags
- use-gestureOpen Source · React + Vanilla
Standard gesture layer under react-spring
same tags
- Web Animations APIFree · Web
Zero-dependency foundation libraries build atop
same tags
- View Transition APIFree · Web
Native platform direction for page UI transitions in 2026
same tags