# Vivus — SVG Drawing Animation Library
> A lightweight JavaScript library that animates SVG paths to create the illusion of being drawn, with zero dependencies and multiple animation styles.
## Install
Save as a script file and run:
# Vivus — SVG Drawing Animation Library
## Quick Use
```bash
npm install vivus
```
```js
import Vivus from 'vivus';
new Vivus('my-svg', { duration: 200, type: 'delayed' });
```
```html
```
## Introduction
Vivus animates SVGs to create a drawing effect where paths appear to be sketched in real time. It manipulates `stroke-dashoffset` and `stroke-dasharray` to progressively reveal each path. The library requires no dependencies and works with any SVG that contains stroke-based paths.
## What Vivus Does
- Animates SVG stroke paths to simulate a hand-drawn effect
- Supports three animation types: delayed, sync, and one-by-one
- Provides a scenario mode for frame-by-frame custom sequencing
- Accepts callback functions for animation start, progress, and completion
- Works with inline SVGs and SVGs loaded from external files via object tags
## Architecture Overview
Vivus reads all path elements from the target SVG and calculates their total length using `getTotalLength()`. It then sets `stroke-dasharray` to the full length and animates `stroke-dashoffset` from the full length to zero using requestAnimationFrame. The animation type determines how paths are scheduled: delayed starts each path after a portion of the previous one completes, sync draws all paths simultaneously, and one-by-one finishes each path before starting the next.
## Self-Hosting & Configuration
- Install via npm or include the standalone script
- Pass the SVG element ID or DOM reference as the first argument
- Set `type` to 'delayed', 'sync', 'oneByOne', or 'scenario'
- Configure `duration` in frames (60 frames per second by default)
- Use `pathTimingFunction` and `animTimingFunction` for custom easing
## Key Features
- Zero dependencies with a small footprint (~5 KB minified)
- Multiple animation types for different visual effects
- Scenario mode for precise per-path timing control via data attributes
- Reverse and reset methods for interactive replay
- Callback system for integrating with scroll triggers or user events
## Comparison with Similar Tools
- **anime.js** — general-purpose animation; Vivus specializes in SVG stroke drawing effects
- **SVG.js** — SVG manipulation and animation library; Vivus is focused solely on the drawing illusion
- **Lottie** — plays exported After Effects animations; Vivus creates animations from static SVGs
- **CSS stroke-dashoffset** — achievable in pure CSS but requires manual length calculation; Vivus automates it
## FAQ
**Q: Do all SVGs work with Vivus?**
A: Vivus requires paths with stroke attributes. Filled shapes without strokes will not animate visibly.
**Q: Can I trigger the animation on scroll?**
A: Yes. Initialize with `start: 'manual'` and call `vivusInstance.play()` from an Intersection Observer callback.
**Q: How do I control individual path timing?**
A: Use the scenario type and set `data-start` and `data-duration` attributes on each path element.
**Q: Does Vivus work with externally loaded SVGs?**
A: Yes, when using an `