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

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script>

Initialize the plugin on the element you want to animate and store in a variable

var mySVG = $('#my_svg_element').drawsvg();

Run the animation

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. |

Demos

Simple usage

Draw on scroll

Callback example

Animate mask path