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);
};