Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Every path element is drawn at the same time with a small delay at the start. This is currently the default animation. Each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`. Each path element is drawn one after the other. This animation gives the best impression of live drawing. To give more freedom, it's possible to override the animation of each path and/or the entire SVG. It works a bit like the CSS animation timing function. But instead of using a cubic-bezier function, it use a simple JavaScript function. It must accept a number as parameter (between 0 to 1), then return a number (also between 0 and 1). It's a hook.

Features

  • Scenarize feature allows you to script the animation of your SVG
  • It's possible to override the animation of each path and/or the entire SVG
  • Every path element is drawn at the same time with a small delay at the start
  • Each line is drawn synchronously
  • Each path element is drawn one after the other
  • Vivus will provide a warning in the console when it detects stroke scaling

Project Samples

Project Activity

See All Activity >

Categories

Animation, Libraries

License

MIT License

Follow Vivus.js

Vivus.js Web Site

Other Useful Business Software
Full-stack observability with actually useful AI | Grafana Cloud Icon
Full-stack observability with actually useful AI | Grafana Cloud

Our generous forever free tier includes the full platform, including the AI Assistant, for 3 users with 10k metrics, 50GB logs, and 50GB traces.

Built on open standards like Prometheus and OpenTelemetry, Grafana Cloud includes Kubernetes Monitoring, Application Observability, Incident Response, plus the AI-powered Grafana Assistant. Get started with our generous free tier today.
Create free account
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Vivus.js!

Additional Project Details

Programming Language

JavaScript

Related Categories

JavaScript Animation Software, JavaScript Libraries

Registered

2021-04-20