title: Drawing circular path with svg and controlling its start / end
body: <p>Is it possible to draw a circular path like this</p>
  
  <p><a href="https://i.stack.imgur.com/b3Cwl.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3Cwl.gif" alt="enter image description here"></a></p>
  
  <p>via svg paths in a way where it is possible to manipulate it to either be 100% (so full circle) or stop at 50%, so top to bottom forming half a circle. Note 100% and 50% are examples used, in real world any percentage from 0 to 100 should be valid.</p>
  
  <p>After some research I found that following approach seems to be how you draw a circle <a href="https://stackoverflow.com/a/8193760/911930">https://stackoverflow.com/a/8193760/911930</a> but I don't see any way to implement this where I can draw / stop path at a given percentage.</p>