A repository of over 1000 quality jQuery plugins

jQuery jquery-drawsvg

jquery-drawsvg is a jQuery Animation & Effects plugin.

Created by lcdsantos

Lightweight, simple to use jQuery plugin to animate SVG paths

Not what you're looking for? Click here to view more Animation & Effects jQuery plugins

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!


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


Look at the demos for more advanced usages.


durationInteger1000The time to complete the animation of each path.
staggerInteger200Delay to start animating each individual path.
easingStringswingWhich easing function each path will use to transition.
Use jQuery Easing Plugin for different easing functions.
reverseBooleanfalseDirection that the line will be drawn.
callbackFunctionfunction() {}A function to call once the animation has been completed.


Simple usage

Draw on scroll

Callback example

Animate mask path

You might also like these other Animation & Effects jQuery Plugins


Preview Download Github Page

The MIT License (MIT)