Paint Groups Of Paths

Paint!

Wrap the paths you want to be painted in a group with the class "spp":

<svg>
  <g class="spp">
    <path d="..." />
    <path d="..." />
    <path d="..." />
    <path d="..." />
  </g>
</svg>

Paint Specific Paths

Paint!

To paint only specific paths, give these pass the class "spp":

<svg>
  <g>
    <path d="..." />
    <path class="spp" d="..." />
    <path class="spp" d="..." />
    <path class="spp" d="..." />
  </g>
</svg>

Paint on page load

Simply call $('#mySVG').SVGPathPainter(); to get your paths painted directly on page load.

Paint on custom call

Paint!

Initialize the plugin with
mySVG = $('#mySVG').SVGPathPainter({ initialDelay: false });
to prevent initial painting.

When desired, call mySVG.SVGPathPainter('paint'); to paint the paths.

Attach plugin to several SVGs

Paint both!

Like most jQuery Plugins, you can also call this one with a selector matching more than one element, e.g.
$('#svg-1, #svg-2').SVGPathPainter();
This results in painting paths at the same time.

Path Delay and Speed

Paint!

Paint!

There are two options you can use to control the naturalness of the animation.

pathDelay (default: 50) defines the milliseconds of pause between the animation of two paths.
speed (default: 1.5) is a factor to slow down (or accelerate if < 1) the speed of a path being painted.

Compare the animation of the SVGs here. The first one uses defaults, the second one uses { pathDelay: 500, speed: 3.2 }.

Paint all paths simultaneously

Paint!

To start painting all paths at the same time (instead of queued), pass the according option when initializing the plugin
$('#svg-1').SVGPathPainter( {simultaneous: true} );
Note that the speed of the animation here was set to 6 to make the visualization more traceable.
Also note that the animations start together, but take different time to finish, depending on path lengths.