title: Animated line drawing (SVG) with CSS
body: <p>I have a SVG which I animate with CSS using <code>stroke-dashoffset</code> and <code>stroke-dasharray</code> depending on the scroll position. This works fine.</p>
  
  <p><a href="http://codepen.io/anon/pen/xVRXrY" rel="nofollow noreferrer">http://codepen.io/anon/pen/xVRXrY</a></p>
  
  <p>What I’d like to achieve is that when the animation is complete (or e.g. when I scrolled down 500px) the stroke shall deconstruct itself from the beginning with the same animation like in my sketch here. </p>
  
  <p><a href="https://i.stack.imgur.com/ykJV1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykJV1.png" alt="See this sketch for a better understanding"></a></p>