title: Snap SVG animate SVG on hover / reset SVG on leave
body: <p>I'm using Snap.svg to create some SVGs that animate on hover.</p>
  
  <p>A very simplified jsfiddle is here:</p>
  
  <p><a href="http://jsfiddle.net/62UA7/2/" rel="nofollow">http://jsfiddle.net/62UA7/2/</a></p>
  
  <pre><code>var s = Snap("#svg");
  var smallCircle = s.circle(100, 150, 70);
  
  //animation
  function animateSVG(){
      smallCircle.animate({cy: 300}, 5000,mina.bounce);
      smallCircle.animate({fill:"red"},200);
  }
  
  //reset function?
  function resetSVG(){
      // something here to reset SVG??
  }
  
  smallCircle.mouseover(animateSVG,resetSVG);
  </code></pre>
  
  <p>The hover / animation is working fine.</p>
  
  <p>The intention is to stop the animation and return to original SVG state if the user moves the mouse off the SVG - and this is where I'm currently stuck.</p>
  
  <p>The actual SVG files I'm using are complex, so hoping for a quick way of 'refreshing' the SVG rather than manually moving it back to original position and colour</p>
  
  <p>I'm assuming there's a really easy way of doing this - just can't seem to work it out or find the answer in any documentation anywhere.</p>
  
  <p>Hopefully someone can help - thanks in advance if you can!</p>