Skip to content
Lightweight, simple to use jQuery plugin to animate SVG paths
Branch: master
Clone or download
Latest commit a334df9 Oct 22, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Added UMD support Oct 5, 2016
src Added UMD support Oct 5, 2016
.editorconfig Added UMD support Oct 5, 2016
.eslintrc.js Added UMD support Oct 5, 2016
.gitattributes First release Sep 10, 2015
.gitignore First release Sep 10, 2015
LICENSE Initial commit Sep 10, 2015
README.md Update README.md Oct 21, 2016
bower.json Added UMD support Oct 5, 2016
gulpfile.js Added UMD support Oct 5, 2016
package.json Added UMD support Oct 5, 2016

README.md

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.

  • Weighs 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

You can’t perform that action at this time.