jquery-drawsvg

Open source

Lightweight, simple to use jQuery plugin to animate SVG paths

766 stars0 likes1 views

About

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG

This plugin uses the jQuery built-in animation engine to transition the stroke on every inside the selected element, using stroke-dasharray and stroke-dashoffset properties.

Weighs less than 2KB minified and 800 bytes gzipped.
Easy to use.
Easing and stagger support.
Free!

Usage

Include jQuery DrawSVG after jQuery

xml

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

javascript

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

Run the animation

javascript

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.