jQuery Plugin For SVG Path Animation - SVG Path Painter

File Size: 15.1 KB
Views Total: 2628
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For SVG Path Animation - SVG Path Painter

SVG Path Painter is a simple jQuery plugin for SVG path animations that allows you to draw and animate SVG paths at a certain speed. This currently works in Chrome, Opera and Firefox only. Users of other browsers will see the SVGs, but no animations.

See also:

How to use it:

1. Add the latest jQuery library and the jQuery SVG Path Painter plugin to your html page.

<script src="jquery.min.js"></script>
<script src="SVGPathPainter-0.1.js"></script>

2. Preparing your SVG data. Create your Line art in your vector editor of choice and insert it into your webpage.

<svg id="star-1" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">
  <g class="spp">
    <path class="spp" d="M50.792,8.093l12.469,25.264c0.486,0.986,1.775,1.923,2.864,2.081l27.879,4.051

3. Simply call SVGPathPainter(); method to get your paths painted directly on page load.


4. Like most jQuery Plugins, you can also call this one with a selector matching more than one element.

$('#svg-1, #svg-2').SVGPathPainter();

5. There are a few options you can use when initializing the plugin..


  // means the milliseconds the painting is delayed from page load. 
  // Set to false if you wish no initial animation.
  initialDelay: 300,

  // defines the milliseconds of pause between the animation of two paths.
  pathDelay: 50,

  // a factor to slow down (or accelerate if < 1) the speed of a path being painted
  speed: 1.5,

  // if set true, the painting of all paths in the SVG will start at the same time (instead of queued)
  simultaneous: false


v1.0.2 (2016-09-27)

  • added optional simultaneous painting
  • changed internal SVG path selector to be less rigid

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