Snap Plugin - Animate along path

snap.animAlongPath.html

<script src="snap.svg-min.js"></script>
<script src="snap.tool.js"></script>
<svg id="snap_demo" width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <path id="svg_4" d="m229,96c0,0 -105,104 -105,104c0,0 97,124 97,124c0,0 139,-2 139,-2c0,0 69,-101 69,-101c0,0 -78,-124 -78,-124c0,0 -122,-1 -122,-1z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="null" stroke-width="5" stroke="#edd7d7" fill="none"/>
  <rect fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="232" y="278" width="1" height="0" id="svg_3"/>
  <circle fill="#000000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="284" cy="96" r="6.7082" id="svg_9">
  </circle>
 </g>
</svg>
<script type="text/javascript">
 var s  = Snap("#snap_demo"); // select existing <svg> 
 var circle = s.select("#svg_9"); // select existing <circle> inside <svg> with id is "svg_9"
 var path = s.select('#svg_4'); 
 circle.animateAlongPath(path, circle, 0, 5000, mina.easeinout);
</script>