doodleSVG is a javascript tool, its purpose is to create objects that handle normalized path (for path, line, circle, rect, ellipse and polygon) from 0 to 1, to easely handle drawing SVG line animation for anytype of SVG object. It can be use with any tween engine.

• Vivus by maxwellito
• DrawSVGPlugin by Greensock
• SVGPathConverter by Waest

1. Animate with TweenMax

git clone https://github.com/trinketmage/doodleSVG.git doodleSVG

You can play with origin and end of each return iteration to do your desire doodle.

• Animate one element

var doodle = new doodleSVG();

var el = document.querySelector("path");
var myDoodle = doodle.normalize(el);

// Default value for end is 0.
TweenMax.to(myDoodle, 5, {end: 1});

• Animate a list of elements

var doodle = new doodleSVG();

var list = document.querySelectorAll("rect");
var myDoodles = doodle.normalizeGroup(list);

// Default value for end is 0.
TweenMax.to(myDoodles, 5, {end: 1});