jQuery DrawSVG

Lightweight, simple to use jQuery plugin to animate SVG paths

Icons by Luboš Volkov


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.


Look at the demos for more advanced usages.


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.


Simple usage

See the Pen zvGXbr by Leonardo Santos (@lcdsantos) on CodePen.

Draw on scroll

See the Pen zvGQYB by Leonardo Santos (@lcdsantos) on CodePen.

Callback example

See the Pen vNNXrm by Leonardo Santos (@lcdsantos) on CodePen.

Animate mask path

See the Pen xwwEJw by Leonardo Santos (@lcdsantos) on CodePen.