title: Loop an animation with Snap.svg
body: <p><strong>Background</strong>: I'm using Snap.svg to render a circle, then animate its radius on hover. I've got that piece working with the code below.</p>
  
  <p><strong>Problem</strong>: I'm trying to get a looping "pulse" effect once <code>circleRadar</code> is hovered on, which would involve continuously animating between the initial <code>r</code> and the new <code>r</code> of 70. While the docs' mention of snap.animate(from, to,...) <a href="http://snapsvg.io/docs/#Snap.animate" rel="nofollow">here</a> seems promising, I can't figure out how I would implement that in the context of my code. Is there anyone a little more familiar with Snap who can help? Thanks!</p>
  
  <p><strong>Code</strong>:</p>
  
  <pre><code>//create the circle
  circleRadar = s.circle(195, 345, 20);
  
  //initial styling  
  circleRadar.attr({
    fill: "#3f8403",
    opacity: 0.3
  });
  
  //animation
  function testRadar(){
    circleRadar.animate({
      opacity: '1',  
    r: 70
    }, 1000, mina.elastic);
  }
  
  //trigger
  circleRadar.hover(testRadar);
  </code></pre>