Animate along a path

Looping an object around a path. Uses animate-object-path.js (see source)



var s = Snap("#svgout"); 

//Uses plugin at http://svg.dabbles.info/animate-object-path.js

var path = s.path("M 60 0 L 120 0 L 180 60 L 180 120 L 120 180 L 60 180 L 0 120 L 0 60 Z").attr({ fill: "none", stroke: "red", opacity: "1" });
var rect = s.rect(60,0,20,20).attr({ fill: 'blue', opacity: 0 });
var rect2 = rect.clone();

function drawRect( el ) {
	el.drawAtPath( path, 7000, { callback: drawRect.bind(null, el) } );
};

for( var x = 0; x < 7; x++ ) {
	setTimeout( function() { drawRect( rect.clone().attr({ opacity: 1 }) ) }, x*1000);
};




   

        
The actual svg markup looks like this (when you've clicked on run)....