title: Animated SVG, circle stroke hover
body: <p>Looking to mimic the animated arrow:</p>
  
  <p><a href="http://uve.info/" rel="noreferrer">http://uve.info/</a></p>
  
  <p>On hover the stroke overlays the circle, I have the shape created in Illustrator, thats fine, positioning easy. just animating the stroke.</p>
  
  <p>HTML (Inline SVG):</p>
  
  <pre><code>&lt;svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve"&gt;
      &lt;polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/&gt;
      &lt;path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The path, is a circle already. I want another path that sits on top of the current path to emulate the uve.info site. This whole animation is done via hover. This is what the arrow should look like mid animation proving a pain.</p>
  
  <p><a href="https://i.stack.imgur.com/eEyaL.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/eEyaL.jpg" alt="uve.info arrow animation"></a></p>
  
  <p>What would be the best way to invoke the stroke?</p>
  
  <p>Thanks all.</p>