A Jquery plugin for path animation using the Raphaël Library.

For more on lazy-line-painter go to;
http://lazylinepainter.info/

Author : Cam O'Connell
http://camoconnell.com/
[email protected]

Preparing your SVG data
Create your Line art in Illustrator;
~ Ensure there are no fills.
~ No closed paths. i.e - Line needs a start and end.
~ Crop Artboard nice & tight!
Export as .SVG (Default export options are fine)
Drop your .SVG into 'SVG to Lazy Line Convertor' on http://lazylinepainter.info/
Copy lazy line code and paste into your DOM ready function.

Configuring lazy-line-painter
A number of attributes can be setup before the line art is Painted, these include;

   
	'strokeWidth'    // Adjust width of stroke
	'strokeColor'    // Adjust stroke color 
	'strokeCap'      // Adjust stroke cap  - butt  | round | square | inherit
	'strokeJoin'     // Adjust stroke join - miter | round | bevel  | inherit
	'onComplete'     // Callback fired after animation
	'delay'          // Delay before animation starts
	'overrideKey'    // Set this property if you selector id doesn't match the key referencing your path data value within svgData. 
 

To apply these options to your element before Painting,
pass lazylinepainter an object as an argument containing the attritubes you wish to alter;

 
$('#demo').lazylinepainter({    
    	'svgData' : svgData, // the object containing the SVG path info 
		'strokeWidth':7,  
		'strokeColor':'#de8f8f'	
	}
) 
 

Note : The only required is the svgData object (which contains your path info).
The svgData object should be structured like so for the plugin to be able to read;

var svgData = { 
	'demo' : // name of your lazy line
	{ 
		'strokepath' : // this contains all your SVG path info
		[ 
			{   'path': "M144.869,199c0...."     // path string , 
			    'duration':300                   // time taken to animate that path
			    },
			{   'path': "M155.85,29c0...."
			    'duration':1000
			    },
			etc ...
		],  
		'dimensions' : { 'width': 270, 'height':266 } // dimensions of element
	}
}
 

Paint ! - Illustrate path
$('#demo').lazylinepainter('paint');

Erase ! - Clear path, Paint can still be called on the element after erased
$('#demo').lazylinepainter('erase');

Destroy ! - Remove path and element from DOM
$('#demo').lazylinepainter('destroy');

• Jquery http://jquery.com/

• Raphaël http://raphaeljs.com/