title: SVG Animation - How can I reverse the start and end points in this svg path?
body: <p>So I am creating some kind of small animations for icons. I want to stick svg as they are just some small line animations.</p>
  
  <p>The .svg is in the html document. The css has the styles for the lines and the animation.</p>
  
  <p><a href="https://jsfiddle.net/pd9ux6e7/" rel="nofollow noreferrer">https://jsfiddle.net/pd9ux6e7/</a></p>
  
  <p>So now what I got. I got this drawing line, just like I wanted it. The only thing that bothers me is the way the animation start and ends. Now it goes from bottom right to top left. But I want to have it from top left to bottom right (just like how you read, from left to right feels much more natural)</p>
  
  <p>Any idea how I can fix this? I think it's somewhere in the svg path but idk what these values stand for. This is the blue line in svg <code>&lt;path class="st3" d="M1194.1,777.2H7c-2.8,0-5-2.2-5-5V35.9" /&gt;</code></p>