title: SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)
body: <p>I am trying to do the most basic <strong>SVG animation</strong>, and everything I've found is trying to teach me keyframes and advanced stuff like that. I understand keyframes from working in After Effects and that's not what I need at all.</p>
  
  <p>All I want to do is animate the same 8 svg paths in a sequence, like a flip book, in which I can edit the loop speed easily. I want the image to change colors, so I would repeat the same 8 SVGs just saved with a different color, or maybe there's a better way to do that with the code, I don't know. I have included a sample GIF that I made demonstrating the exact effect I am looking for. Basically I want to recreate that GIF in scalable SVG format. What you see is 8 separate drawings. </p>
  
  <p><a href="https://i.stack.imgur.com/ZlqYA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZlqYA.gif" alt="enter image description here"></a></p>
  
  <p>I want to display this animation on my website as the main graphic, so it needs to be scalable.</p>
  
  <p>I need to do this as soon as humanly possible for my portfolio review.</p>