compare / vs vivusmeasured 2026-10-3110 rows
svg-scroll-draw vs vivus
vivus draws SVG strokes over time, and does it well — but it has not shipped since 0.4.6 in April 2021. svg-scroll-draw/vivus is a drop-in: import Vivus from 'svg-scroll-draw/vivus' instead of 'vivus', and every new Vivus(…) call, option, animation type, scenario attribute and timing function keeps working. The browser suite runs vivus 0.4.6 beside it and requires the SVG markup — every generated path and dash value — to match exactly at every point of the animation. It is 4.2 KB against 4.1 KB. When you want the stroke tied to scroll position instead of a clock, scrollDraw is in the same package.
- svg-scroll-draw
- 11.6 KB
- vivus
- 4.1 KB
- Only here
- 4 of 10
- Only vivus
- 0 of 10
What each figure measures
Measured from vivus 0.4.6 dist/vivus.min.js and the built svg-scroll-draw/vivus entry, gzip level 9.
Minified + gzipped at level 9, measured 2026-10-31 against vivus 0.4.6 and svg-scroll-draw 2.23.3. vivus is MIT.
vivus: npm pack vivus@0.4.6 && gzip -9 package/dist/vivus.min.js — Draws SVG strokes over time (frame-based), started on page load, on viewport entry or by hand — not scrubbed by scroll position.
Feature matrix
| # | Feature | svg-scroll-draw | vivus |
|---|---|---|---|
| 01 | new Vivus(el, options, callback)Same constructor, same validation errors | Supported | Supported |
| 02 | Animation types (delayed, sync, oneByOne, scenario, scenario-sync) | Supported | Supported |
| 03 | Shapes converted to paths (rect, circle, line, polyline…)Same d strings, byte for byte | Supported | Supported |
| 04 | play / stop / reset / finish / setFrameProgress | Supported | Supported |
| 05 | Draw tied to scroll positionvivus only starts on viewport entry; scrollDraw scrubs with the scroll | Supported | Not supported |
| 06 | Native CSS fast pathFor scrollDraw | Supported | Not supported |
| 07 | Respects prefers-reduced-motionThe drop-in jumps to the end and still fires callbacks | Supported | Not supported |
| 08 | TypeScript types shipped | Supported | Not supported |
| 09 | ES module + script-tag build | Supported | Supported |
| 10 | Bundle size (gzipped)The vivus entry point on its own | 4.2 KB | 4.1 KB |
Supported SupportedNot supported Not supportedPartial Partial or requires extra workChecked against vivus 0.4.6.
When vivus is the right call
- W1
It already works
vivus is MIT and stable. If your animation is done and you never revisit it, there is no urgent reason to change.
- W2
Its demo site and docs
vivus has a well-known demo page and years of tutorials and answers written against it — all of which apply to the drop-in too.
Questions
Do I need to change my vivus code?
No. Change the import (or the script tag to dist/cdn/vivus.global.js, which defines window.Vivus) and keep the rest — or run npx svg-scroll-draw migrate, which makes those edits and swaps the dependency. Options, types, start modes, data-start / data-duration / data-delay / data-async / data-ignore attributes and Vivus.EASE and friends are all supported.
How do I use it in React or Next.js?
useVivus() from svg-scroll-draw/vivus/react creates the instance on the mounted <svg>, destroys it on unmount (StrictMode-safe) and returns it for play() and reset(). The entry is marked "use client", so it works in the Next.js App Router.
Is vivus still maintained?
Its last release was 0.4.6, published 2021-04-17. It is MIT-licensed and still works.
Can the line draw as you scroll instead of on a timer?
Yes — that is what scrollDraw does, in the same package: the stroke follows the scroll position, reverses when you scroll back, and runs on a native CSS scroll timeline where the browser supports it.