title: SVG line animation with anime.js
body: <p>I'm modifying a pen to create an SVG animation. I would like the green element to exactly follow the line path but it is not. Also it is not looping the 8 path correctly in one line but bounceing at the crossroad of the loop. Any advice how to achieve this would be appreciated since I haven't been able to find a solution</p>
  
  <pre><code>var path = anime.path('path');
  
  anime({
    targets: 'div',
    translateX: path,
    translateY: path,
    rotate: path,
    duration: 6000,
    loop: true,
    easing: 'linear'
  });
  </code></pre>
  
  <p>Here's the codepen: <a href="https://codepen.io/anon/pen/VWYKwB" rel="nofollow noreferrer">https://codepen.io/anon/pen/VWYKwB</a></p>