SVG line drawing animations create the compelling visual effect of paths being “drawn” in real-time. While vivus.js pioneered this technique and remains relevant, the landscape has evolved significantly with modern alternatives offering better performance, smaller bundle sizes, and more features.
Updated 2025: Moved over from an old article.
Current State of Vivus.js (2025)
Vivus.js is a lightweight JavaScript library specifically designed for SVG line drawing animations with these characteristics:
Pros:
- Zero dependencies – Pure JavaScript implementation
- Small footprint – Lightweight and focused
- Simple API – Easy to implement basic drawing animations
- Stable – Mature library with proven track record
Cons:
- Limited scope – Only handles line drawing animations
- Performance issues – Can lag on complex SVGs, especially mobile
- Maintenance concerns – Less active development compared to alternatives
- Limited animation control – Basic timing and easing options
NPM Statistics (2025):
- 6,027 weekly downloads
- 14,906 GitHub stars
- Last major update: Several years ago
Modern Alternatives & Better Solutions
1. GSAP (GreenSock Animation Platform) – TOP CHOICE
Why it’s better: Industry-standard animation library with exceptional performance and comprehensive SVG support.
Key Features:
- Hardware acceleration for smooth 60fps animations
- Advanced timeline controls with precise timing
- SVG morphing, path animations, and complex transforms
- Professional-grade performance optimization
- Extensive documentation and community support
Bundle size: ~23KB (minified)
NPM downloads: 392,003 weekly downloads
GSAP SVG Line Drawing Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Modern GSAP approach gsap.set("#myPath", {drawSVG: "0%"}); gsap.to("#myPath", { duration: 2, drawSVG: "100%", ease: "power2.inOut" }); // With timeline for multiple paths const tl = gsap.timeline(); tl.from("#path1", {drawSVG: "0%", duration: 1}) .from("#path2", {drawSVG: "0%", duration: 1}, "-=0.5") .from("#path3", {drawSVG: "0%", duration: 1}, "-=0.5"); |
Links:
2. Motion (Formerly Framer Motion) – REACT FAVORITE
Why it’s better: Modern React-focused animation library with excellent SVG path support and smaller bundle size.
Key Features:
- React-native integration with hooks and components
- Declarative animations with intuitive syntax
- Hardware acceleration and optimized performance
- Built-in SVG path properties (pathLength, pathOffset, pathSpacing)
- Gesture support and advanced interactions
Bundle size: 18KB full-featured (2.6KB mini version)
Performance: Faster than GSAP for React applications
Motion SVG Line Drawing Example:
|
1 2 3 4 5 6 7 8 9 10 11 |
import { motion } from "motion/react"; const AnimatedSVG = () => { return ( <svg viewBox="0 0 100 100"> <motion.path d="M 10 10 L 90 90" stroke="black" strokewidth="2" fill="transparent" initial="{{" pathlength:="" 0="" }}="" animate="{{" 1="" transition="{{" duration:="" 2,="" ease:="" "easeinout"=""></motion.path> </svg> ); }; |
Links:
3. Anime.js – LIGHTWEIGHT CHAMPION
Why it’s better: Minimalist approach with small bundle size and excellent performance for simple to moderate animations.
Key Features:
- Tiny bundle size – Very lightweight
- Simple, intuitive API
- SVG path animation support
- Timeline and keyframe animations
- Good performance on mobile devices
Bundle size: ~17KB (much smaller than GSAP)
NPM downloads: 159,794 weekly downloads
Anime.js SVG Line Drawing Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Anime.js path animation anime({ targets: '#myPath', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutSine', duration: 1500, delay: function(el, i) { return i * 250 }, direction: 'alternate', loop: true }); |
Links:
4. Native CSS Animation – ZERO JAVASCRIPT
Why it’s better: No JavaScript required, excellent performance, and works everywhere modern browsers are supported.
Key Features:
- Zero JavaScript dependency
- Hardware accelerated CSS animations
- Excellent browser support
- Smallest possible bundle impact
- Easy to implement for simple animations
Native CSS SVG Line Drawing Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.animated-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } |
|
1 2 3 4 5 |
<svg viewBox="0 0 100 100"> <path class="animated-path" d="M 10 10 L 90 90" stroke="black" stroke-width="2" fill="none"></path> </svg> |
5. Web Animations API – MODERN STANDARD
Why it’s better: Native browser API with excellent performance and no external dependencies.
Key Features:
- Native browser support (modern browsers)
- Hardware acceleration
- Precise timing control
- No external dependencies
- Future-proof web standard
Web Animations API Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const path = document.querySelector('#myPath'); const pathLength = path.getTotalLength(); path.style.strokeDasharray = pathLength; path.style.strokeDashoffset = pathLength; path.animate([ { strokeDashoffset: pathLength }, { strokeDashoffset: 0 } ], { duration: 2000, easing: 'ease-in-out', fill: 'forwards' }); |
Performance Comparison (2025)
Library | Bundle Size | Performance | Mobile Friendly | Learning Curve | Use Case |
|---|---|---|---|---|---|
Vivus.js | ~13KB | Good (3/5) | Fair (2/5) | Excellent (5/5) | Basic line drawing only |
GSAP | ~23KB | Excellent (5/5) | Excellent (5/5) | Good (3/5) | Professional animations |
Motion | ~18KB | Excellent (5/5) | Excellent (5/5) | Very Good (4/5) | React applications |
Anime.js | ~17KB | Very Good (4/5) | Very Good (4/5) | Very Good (4/5) | Lightweight projects |
CSS Only | 0KB | Excellent (5/5) | Excellent (5/5) | Excellent (5/5) | Simple animations |
Web Animations API | 0KB | Excellent (5/5) | Excellent (5/5) | Good (3/5) | Modern browsers |
2025 Recommendations
For React Projects:
Use Motion – Best integration, excellent performance, and comprehensive features.
For High-Performance Animations:
Use GSAP – Industry standard with unmatched performance and capabilities.
For Simple Line Drawings:
Use CSS Animations – Zero dependencies, excellent performance, and universal support.
For Lightweight Projects:
Use Anime.js – Small bundle size with great functionality.
For Modern Web Standards:
Use Web Animations API – Future-proof and native browser support.
Migration from Vivus.js
Basic Vivus.js Code:
|
1 2 3 4 5 6 7 8 |
// Old Vivus.js approach new Vivus('my-svg', { type: 'delayed', duration: 200, animTimingFunction: Vivus.EASE_OUT }); |
Modern Equivalent (GSAP):
|
1 2 3 4 5 6 7 8 9 |
// Modern GSAP approach gsap.from("#my-svg path", { drawSVG: "0%", duration: 2, stagger: 0.1, ease: "power2.out" }); |
Modern Equivalent (CSS):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#my-svg path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-out forwards; animation-delay: calc(var(--index) * 0.1s); } @keyframes draw { to { stroke-dashoffset: 0; } } |
Additional Resources & Examples
Live Examples:
- GSAP DrawSVG CodePen Collection
- Motion SVG Animation Examples
- CSS-Tricks SVG Line Animation Tutorial
Tools for Creating SVG Animations:
- SVGator – Visual SVG animation tool
- Rive – Modern animation tool with web export
- Lottie – After Effects to web animations
- Haiku – Design tool for interactive animations
Thoughts
While vivus.js served its purpose well, 2025’s ecosystem offers significantly better alternatives. For most new projects, consider:
- GSAP for professional, high-performance animations
- Motion for React applications
- CSS animations for simple, performant solutions
- Anime.js for lightweight projects
The future of SVG animation lies in leveraging modern browser capabilities, better performance optimization, and more intuitive APIs that these modern solutions provide.
FAQ
What are the different methods to animate SVG elements?
There are three main methods to animate SVG elements:
CSS Animations: Use CSS @keyframes and animation properties to animate SVG properties like fill, stroke, opacity, and transforms. Best for simple animations and hardware acceleration.
JavaScript Libraries: Use libraries like GSAP, Snap.svg, or Velocity.js for complex animations with precise control over timing and easing.
SMIL (SVG Animation): Use native SVG animation elements like <animate>, <animateTransform>, and <animateMotion> for declarative animations that work even when SVG is used as an image.
Why is my SVG animation not working?
Common reasons for SVG animations not working include:
Using <img> tag: Animations don’t work when SVG is embedded via <img> tag. Use <object> tag or inline SVG instead.
Syntax errors: Check for missing closing tags, incorrect attribute values, or malformed SVG markup.
Browser compatibility: SMIL animations don’t work in Internet Explorer. CSS animations have limited SVG support in older browsers.
Timing issues: SVG animations may not start until the page is fully loaded, causing delays.
Which animation method should I choose: CSS, JavaScript, or SMIL?
Choose CSS when: You need simple animations like hover effects, basic transforms, or want hardware acceleration. CSS animations are lightweight and perform well on mobile.
Choose JavaScript when: You need complex animations, interactive controls, or want to animate properties that CSS can’t handle. Good for timeline-based animations.
Choose SMIL when: You want animations that work when SVG is used as an image, need to animate path data, or want declarative animation syntax without external dependencies.
How do I create a simple SVG line drawing animation?
Use stroke-dasharray and stroke-dashoffset for line drawing effects:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } |
What is SMIL and is it deprecated?
SMIL (Synchronized Multimedia Integration Language) is a declarative language for SVG animations using elements like <animate> and <animateMotion>.
SMIL is NOT deprecated. While Chrome announced deprecation plans in 2015, they reversed this decision. SMIL is well-supported in modern browsers (Chrome, Firefox, Safari, Edge) but not in Internet Explorer.
SMIL remains useful for animations that need to work when SVG is used as an image or background, which CSS and JavaScript animations cannot do.
How can I optimize SVG animations for better performance?
Optimize SVG files: Use tools like SVGO to remove unnecessary code and reduce file size.
Use CSS animations for simple effects: They’re hardware-accelerated and perform better than JavaScript.
Enable hardware acceleration: Add transform: translateZ(0) or will-change: transform to trigger GPU rendering.
Lazy load animations: Start animations only when they come into viewport to save CPU resources.
Simplify complex paths: Reduce the number of path points and avoid overly detailed illustrations.
Why do my SVG animations perform poorly on mobile devices?
Mobile performance issues are common due to:
Limited CPU/GPU power: Mobile devices have less processing power than desktops.
Complex animations: Too many animated elements or complex paths can overwhelm mobile browsers.
Browser differences: Safari on iOS may handle SVG animations differently than Chrome on Android.
Solutions: Use CSS animations instead of JavaScript, reduce animation complexity, implement viewport-based loading, and test across different mobile browsers.
Can I animate SVG path data (the ‘d’ attribute)?
With SMIL: Yes, you can animate path data using the <animate> element:
|
1 2 3 4 5 6 7 |
<path d="M10 10 L50 10"> <animate attributeName="d" values="M10 10 L50 10;M10 10 L50 50;M10 10 L10 50" dur="2s" repeatCount="indefinite"/> </path> |
With CSS: Limited support. As of 2025, most browsers don’t fully support animating the ‘d’ attribute with CSS.
With JavaScript: Use libraries like GSAP with MorphSVG plugin for smooth path morphing animations.
How do I make SVG animations responsive?
Use viewBox: Set viewBox on your SVG element instead of fixed width/height:
|
1 2 3 4 5 |
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <!-- your animated content --> </svg> |
CSS sizing: Use max-width: 100% and height: auto on the SVG element.
Media queries: Adjust animation timing or complexity based on screen size to optimize for different devices.
What are the browser compatibility issues with SVG animations?
SMIL animations: Not supported in Internet Explorer. Fully supported in Chrome 5+, Firefox 4+, Safari 6.1+, Edge 79+.
CSS animations on SVG: Limited support in IE10-11. Modern browsers support most CSS animations on SVG elements.
JavaScript animations: Work across all browsers but require fallbacks for older versions.
Mobile browsers: Generally good support, but performance may vary. Test on actual devices for best results.
How do I chain multiple SVG animations together?
With SMIL: Use the ‘begin’ attribute to chain animations:
|
1 2 3 4 5 6 7 |
<circle cx="50" cy="50" r="10"> <animate id="first" attributeName="r" from="10" to="20" dur="1s"/> <animate attributeName="fill" from="red" to="blue" begin="first.end" dur="1s"/> </circle> |
With CSS: Use animation-delay to stagger animations or animation events in JavaScript.
With JavaScript: Use promises, callbacks, or timeline libraries like GSAP for precise sequencing.
What tools can I use to create SVG animations?
Visual Tools:
• SVGator – Browser-based animation tool with timeline editor
• Adobe After Effects with Bodymovin plugin for Lottie export
• Xyris – Specialized SMIL animation tool
• SVG Artista – Free browser tool for simple stroke animations
Code Libraries:
• GSAP (GreenSock) – Professional animation library
• Snap.svg – SVG manipulation library
• Velocity.js – Lightweight animation engine
• Anime.js – Lightweight JavaScript animation library
How do I make SVG animations accessible?
Add ARIA labels: Use aria-label or aria-describedby to describe the animation purpose.
Respect user preferences: Check for prefers-reduced-motion and disable animations when requested:
|
1 2 3 4 5 6 7 |
@media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } } |
Provide alternatives: Offer static versions or alternative content for users who cannot see animations.
Use semantic markup: Include proper titles and descriptions within SVG elements.
Can SVG animations work in email clients?
Limited support: Most email clients don’t support SVG animations due to security restrictions.
Alternative approaches:
• Use animated GIFs as fallback
• Convert SVG animations to video formats (MP4/WebM)
• Use CSS animations with HTML elements instead of SVG
• Test thoroughly across major email clients (Gmail, Outlook, Apple Mail)
Best practice: Always provide static fallback images for email campaigns.
