Single page app to create independent stroke animated SVGs
Switch branches/tags
Nothing to show
Clone or download
Latest commit 46b77d0 Mar 12, 2018
Failed to load latest commit information.
.github Add issue template Oct 27, 2016
assets Add intro Oct 21, 2016
scripts Clean SVG on drop Mar 11, 2018
style Clean up CSS Oct 27, 2016
.gitignore Add gitignore Oct 10, 2016 Complete overview Oct 23, 2016
index.html Fixing dark/light mode labels Aug 30, 2017 added your suggestion and cleaned up the grammar Jan 11, 2017

Vivus instant

Try Vivus Instant.

It's like Vivus but for a disposable usage. Powered by CSS animations.

Single page app to create independent stroke animated SVGs. For Vivus Instant to work properly make sure your SVG elements contains stroke properties and fill="none"

Why this project?

Many developers seem happy to use Vivus to animate SVGs, however many times it's for a single use without controls or callbacks.. so why download an extra JS library when a piece of CSS can do the job? So here it is: Vivus instant.

By looking at the code, you can mention a copy of the Pathformer and a custom Vivus. The entire controls and drawing parts have been stripped down to let place to a rendering engine.

How to use this SVG?

<!-- This should work everywhere -->
<object type="image/svg+xml" data="your_animated_svg.svg"></object>

<!-- This might be clunky -->
<img src="your_animated_svg.svg"/>

<!-- Copy pasting your animated SVG to use it inline -->

Manual trigger

This works by adding the trigger class to the SVG tag. Unfortunately, it can only be done inline, that means your entire SVG code must be in your HTML page. Otherwise the trigger won't work. However in a object tag it is possible to access the SVG tag to add the trigger class, but it require some extra logic to wait the document load. The tag is accessible via the property contentDocument of the <object> tag.

Help and feedback

These tools are in beta. Any feedback or bug report is welcome. Please open an issue or a pull request. Just follow the requirements in the issue template :)