https://github.com/maxwellito/vivus-instant
Single page app to create independent stroke animated SVGs
https://github.com/maxwellito/vivus-instant
Last synced: about 1 year ago
JSON representation
Single page app to create independent stroke animated SVGs
- Host: GitHub
- URL: https://github.com/maxwellito/vivus-instant
- Owner: maxwellito
- Created: 2016-10-27T12:00:14.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-11T21:46:21.000Z (over 8 years ago)
- Last Synced: 2025-04-02T06:51:34.713Z (over 1 year ago)
- Language: JavaScript
- Size: 53.7 KB
- Stars: 339
- Watchers: 15
- Forks: 45
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Vivus instant
[Try Vivus Instant](https://maxwellito.github.io/vivus-instant/).
> It's like [Vivus](https://maxwellito.github.io/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](https://maxwellito.github.io/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?
```html
...
```
### 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 `` 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 :)