Vivus — SVG Drawing Animation Library

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 <object> tag. Pass the object element's ID to Vivus and it will access the SVG document inside.

Sources

• https://github.com/maxwellito/vivus
• https://maxwellito.github.io/vivus/