Skip to content
Get packs

Guide · Open source

How to use vivus: draw-on SVG animation in JavaScript

Updated · written with AI from the project's own documentation and checked against our catalogue data

Vivus is a small JavaScript class with no dependencies that makes an SVG look like it is being drawn by a pen. This guide shows you how to install it, load an SVG inline or from a file, choose an animation type and tune the main options. By the end you will be able to add a drawing reveal to a logo or illustration on your own page.

vivus.jsmaxwellito/vivus · ★ 15.5k · MIT

Quick start

  1. 1Install the package. Run npm install vivus in your project folder, or include the jsDelivr CDN script.
  2. 2Prepare the SVG. Set fill to none and stroke to a colour on every element, and remove hidden paths and text.
  3. 3Add the SVG to the page. Place the inline SVG with an id, or create an object tag or wrapper element for a file.
  4. 4Create the Vivus instance. Call new Vivus with the element id and an options object such as duration.
  5. 5Pick an animation type. Set type to delayed, sync or oneByOne depending on the effect you want.
  6. 6Adjust timing and start. Set start to inViewport, manual or autostart, and tune duration and delay.

Install Vivus with npm, Bower or a CDN

The README lists several ways to get Vivus. The most direct is the npm package, which you install from your project folder.

Vivus also has a jsDelivr CDN link if you prefer to include a script tag instead of using a package manager. Bower, CDNJS and WebJars are listed as other options.

  • npm: install the package named vivus
  • jsDelivr CDN: load the vivus.min.js file from the dist folder of the latest npm release
  • Bower, CDNJS and WebJars are also listed in the README
npm install vivus

Create a basic animated SVG with an inline SVG

For an inline SVG, put the SVG markup in your page with an id, then call the Vivus constructor with that id. The constructor takes the element id, an options object and an optional callback that runs when the animation ends.

The README example uses a duration of 200 frames, which is also the default.

  • Give the svg element an id, for example my-svg
  • Pass the id as the first argument to new Vivus()
  • Pass options such as duration as the second argument
  • Pass an optional callback as the third argument
<svg id="my-svg"> <path...> <path...> <path...> </svg> <script> new Vivus('my-svg', {duration: 200}, myCallback); </script>

Load an SVG from a file instead

If your SVG is in a separate file, you can use an object tag and point Vivus at it. You can also give a wrapper element and set the file option, and Vivus will create the object tag and append it to that element.

By default the object takes the size of its parent element, so the parent must have a height and width or the SVG may not appear. If you need to change the object after it loads, use the onReady callback, where the el property refers to the SVG element.

  • Option A: an object tag with type image/svg+xml and a data attribute pointing to your file
  • Option B: an empty div with the file option set to the SVG path
  • Set a height and width on the parent element
<div id="my-div"></div> <script> new Vivus('my-div', { duration: 200, file: 'link/to/my.svg' }, myCallback); </script>

Choose an animation type

The type option sets how the paths are drawn. The README describes three main options in detail. The default is delayed.

Delayed draws every path at the same time with a small delay at the start. Sync draws each line at the same time, so they all start and finish together. OneByOne draws each path after the previous one and, according to the README, gives the best impression of live drawing. Its duration for each line depends on the line length so the drawing speed stays constant.

  • delayed (default): all paths draw together with a small delay between first and last
  • sync: all lines start and finish at the same time
  • oneByOne: paths draw in sequence, with speed based on length

Tune the main options

Duration is set in frames and defaults to 200. The delay option sets the time between the first and last path and only applies to delayed animations. The start option controls when the animation begins: inViewport waits until the SVG is visible, manual waits for you to call the draw method, and autostart starts immediately.

If you see glitches at the start of the animation, the README suggests increasing dashGap, which defaults to 2. The reverseStack option draws paths in reverse order. The selfDestroy option removes the extra styling Vivus adds, leaving the SVG as it was originally.

  • duration: frames, default 200
  • delay: only for delayed animations
  • start: inViewport, manual or autostart
  • dashGap: increase it if the initial state glitches, default 2
  • reverseStack: reverse the drawing order, default false
  • selfDestroy: remove the added styling afterwards
new Vivus('my-svg', { type: 'oneByOne', duration: 200, start: 'autostart', dashGap: 2 });

Prepare your SVG so it animates correctly

Vivus draws strokes, not fills. The README says every element must have a stroke and cannot be filled, for example fill set to none and stroke set to a colour. Hidden path elements should be removed first, because Vivus treats them as eligible to animate, which can leave blank areas and gaps.

Text elements are not allowed because they cannot be converted into path elements. Vivus includes a helper called pathformer that converts shapes such as circle, rect, line and polyline into path elements so their strokes can be animated.

  • Use stroke on every element and avoid filled shapes
  • Remove hidden path elements before animating
  • Do not use text elements
  • Shapes like circle, rect, line and polyline are handled by pathformer

What people use it for

  • Animating a company logo as an intro on a landing page
  • Adding a hand-drawn reveal to an illustration on a website
  • Creating an animated SVG to download with the Vivus Instant tool for a single SVG without callbacks or controls

Frequently asked questions

How do I install vivus?

Run npm install vivus in your project folder. The README also lists Bower and a jsDelivr CDN script tag as alternatives.

Does vivus have any dependencies?

No. The README describes Vivus as a lightweight JavaScript class with no dependencies, and it lists no prerequisites for installation.

Is vivus free to use?

Vivus is released under the MIT licence, according to the project information. Check the licence file in the repository for the full terms.

Why is my SVG not animating?

Check that every element has a stroke and is not filled, that there are no hidden path elements, and that the SVG has no text elements. The README also says the parent element needs a height and width when using a file.

Can vivus animate circles and rectangles?

Yes, through the pathformer helper, which converts shapes like circle, rect, line and polyline into path elements. Text elements cannot be converted and are not allowed.

What are alternatives to vivus?

Comparable projects include Lottie, GSAP DrawSVGPlugin and Snap.svg. Vivus is focused on the draw-on effect for SVG with no dependencies, while the others offer broader animation features.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Vivus suits web developers and designers who want a lightweight, dependency-free draw-on effect for logos or line illustrations. If your SVG is mostly filled shapes, relies on text, or needs detailed animation control beyond the draw types and timing functions, pick a broader tool such as GSAP DrawSVGPlugin or Lottie.

Install options & downloads