Lightweight jQuery SVG Line Animation Plugin - DrawSVG

DrawSVG is a really simple jQuery plugin that creates a custom SVG line drawing animation using jQuery animate() method to make your SVG path draw itself progressively.

See also:

• SVG Path Animation Plugin with jQuery - Lazy Line Painter
• SVG Path Animation On Scroll Using jQuery - SVG Scroll
• jQuery Plugin For SVG Path Animation - SVG Path Painter

How to use it:

1. Include jQuery library and the jQuery DrawSVG plugin on the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/jquery.drawsvg.min.js"></script>

2. Include the jQuery easing plugin for additional easing functions.

<script src="/path/to/jquery.easing.1.3.min.js"></script>

3. Embed a SVG into your web page.

<svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256">
  <g stroke="#FFF" stroke-width="2" fill="none">
    <path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
    <path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
    <path d="M103.302 33H157v45H19V33h52.72" />
    <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
    <path d="M18.696 103h137.896v.17" />
    <path d="M18.738 127h42.64v.308" />
    <path d="M18.738 155h137.854v.068" />
    <path d="M18.738 178h137.854v-.006" />
    <path d="M18.696 227h137.868v-.21" />
  </g>
</svg>

4. Animate the SVG paths.

var $svg = $('svg').drawsvg();

$svg.drawsvg('animate');

5. Default plugin options.

// The time to complete the animation of each path.
duration: 1000,

// Delay to start animating each individual path.
stagger: 200,

// easing effect
easing: 'swing',

// Direction that the line will be drawn.
reverse: false,

// A function to call once the animation has been completed.
callback: $.noop

Change log:

2016-10-06

• added UMD support.

2015-11-06

• fixed Safari (possible iOS) Problem

---

This awesome jQuery plugin is developed by lcdsantos. For more Advanced Usages, please check the demo page or visit the official website.