jQuery DrawSVG
This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.
- Weights less than 2KB minified and 800 bytes gzipped.
- Easy to use.
- Easing and stagger support.
- Free!
Usage
Include jQuery DrawSVG after jQuery ```html ``` Initialize the plugin on the element you want to animate and store in a variable ```js var mySVG = $('#mysvgelement').drawsvg(); ``` Run the animation ```js mySVG.drawsvg('animate'); ``` Look at the demos for more advanced usages.Options
| Option | Type | Default | Description | | ---------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | |duration | Integer | 1000 | The time to complete the animation of each path. |
| stagger | Integer | 200 | Delay to start animating each individual path. |
| easing | String | swing | Which easing function each path will use to transition. Use jQuery Easing Plugin for different easing functions. | |
reverse | Boolean | false | Direction that the line will be drawn. |
| callback | Function | function() {} | A function to call once the animation has been completed. |
