jQuery Plugin For SVG Path Animation - SVG Path Painter
File Size: | 15.1 KB |
---|---|
Views Total: | 2674 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SVG Path Painter is a simple jQuery plugin for SVG path animations that allows you to draw and animate SVG paths at a certain speed. This currently works in Chrome, Opera and Firefox only. Users of other browsers will see the SVGs, but no animations.
See also:
How to use it:
1. Add the latest jQuery library and the jQuery SVG Path Painter plugin to your html page.
<script src="jquery.min.js"></script> <script src="SVGPathPainter-0.1.js"></script>
2. Preparing your SVG data. Create your Line art in your vector editor of choice and insert it into your webpage.
<svg id="star-1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve"> <g class="spp"> <path class="spp" d="M50.792,8.093l12.469,25.264c0.486,0.986,1.775,1.923,2.864,2.081l27.879,4.051 c1.089,0.158,1.335,0.916,0.547,1.684L74.379,60.837c-0.788,0.769-1.28,2.283-1.095,3.368l4.762,27.767 c0.186,1.085-0.459,1.553-1.433,1.041l-24.936-13.11c-0.974-0.512-2.567-0.512-3.541,0l-24.937,13.11 c-0.974,0.512-1.618,0.044-1.432-1.041l4.763-27.767c0.186-1.085-0.307-2.6-1.094-3.368L5.263,41.173 c-0.788-0.768-0.542-1.525,0.547-1.684l27.88-4.051c1.088-0.158,2.377-1.095,2.864-2.081L49.022,8.093 C49.509,7.107,50.306,7.107,50.792,8.093"/> </g> </svg>
3. Simply call SVGPathPainter();
method to get your paths painted directly on page load.
$('#demo').SVGPathPainter();
4. Like most jQuery Plugins, you can also call this one with a selector matching more than one element.
$('#svg-1, #svg-2').SVGPathPainter();
5. There are a few options you can use when initializing the plugin..
$('#demo').SVGPathPainter({ // means the milliseconds the painting is delayed from page load. // Set to false if you wish no initial animation. initialDelay: 300, // defines the milliseconds of pause between the animation of two paths. pathDelay: 50, // a factor to slow down (or accelerate if < 1) the speed of a path being painted speed: 1.5, // if set true, the painting of all paths in the SVG will start at the same time (instead of queued) simultaneous: false });
Changelog:
v1.0.2 (2016-09-27)
- added optional simultaneous painting
- changed internal SVG path selector to be less rigid
This awesome jQuery plugin is developed by code-shambles. For more Advanced Usages, please check the demo page or visit the official website.