Skip to content
Get packs

vivus.js

JavaScript library that makes SVG drawings appear to be drawn on screen.maxwellito/vivus

GitHub Download v0.4.6
Stars
15.5k
Forks
1.1k
Licence
MIT
Language
JavaScript
Last update
4.3 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Vivus is a small JavaScript class with no dependencies that animates SVG images so they look like they are being drawn by a pen. It works by animating the stroke of each line in the SVG, and it includes a helper called pathformer that converts other SVG shapes into paths so they can be animated too. It is typically used on websites to add a drawing effect to logos or illustrations.

  • Animate a logo so it draws itself when scrolled into view
  • Choose between delayed, sync, and oneByOne drawing styles for an illustration
  • Load an external SVG file into a page element and start the animation when it appears
  • Export a single animated SVG using Vivus Instant for use without JavaScript

Great for

  • Web developers adding a hand-drawn reveal effect to logos or illustrations
  • Designers who want animated SVG intros without writing animation code from scratch
  • Sites that need a lightweight animation with no extra dependencies
  • Anyone who wants to download a finished animated SVG using the Vivus Instant tool

Not ideal for

  • SVGs made mostly of filled shapes, since the animation only draws strokes and the README says filled elements are not checked
  • SVGs that rely on text elements, which the README says are not allowed
  • Projects that need complex animation control beyond the provided draw types and timing functions
Step-by-step guide: how to use vivus.jsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install via npm

    npm install vivus
  2. 2

    Run it

    • Install the package with npm or include the script from a CDN
    • Prepare an SVG with stroke-based paths and no text elements
    • Create a new Vivus instance pointing at your SVG element's ID with a duration option
    • Optionally add a callback to run when the animation ends
  3. 3

    Get the most out of it

    • Use the oneByOne type for a live drawing feel, since durations scale with line length
    • Set start to manual if you want to control when the animation begins
    • Use onReady to adjust the generated SVG element, as shown in the README example
    • Check the hacks.md file referenced in the README for additional tricks
    • Use selfDestroy to remove the added styling after the animation finishes

Downloads

Source code (.zip)master branch · straight from GitHubRelease v0.4.6Release notes and source

Strengths

  • Lightweight with no dependencies, according to the README
  • Offers several built-in animation styles and custom timing functions
  • Available through npm, Bower, and several CDNs

Trade-offs

  • The README lists SVG requirements: strokes must be used, fills avoided, hidden paths removed, and text elements are not supported
  • Last push in the metadata is July 2022, so maintenance activity may be limited
  • The README is truncated, so some methods and details are not covered here

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.