I was inspired by this animation:
https://codepen.io/matchboxhero/pen/RLebOY
I then went through a lot of research to learn about SVG and how CSS affects it. I recently tried to imitate the code that makes the birds flap their wings by making an SVG file of blocks of the primary and secondary colors. For some reason, the red block keeps rotating instead. Does anyone have any clue why the cells of the bird SVG all cycle through, but only one part of mine loops?
Here is a pen of my code:
https://codepen.io/veryeager/pen/XWbzGGd
The SVG file was coded by me.
<svg xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 330px 100px">
<g fill="none" fill-rule="evenodd">
<g>
<path class="cell" stroke="none" d="M 10 10 h 75 v 75 h -75 z"/>
<path class="cell" stroke="none" d="M 85 10 h 75 v 75 h -75 z"/>
<path class="cell" stroke="none" d="M 160 10 h 75 v 75 h -75 z"/>
<path class="cell" stroke="none" d="M 235 10 h 75 v 75 h -75 z"/>
<path class="cell" stroke="none" d="M 310 10 h 75 v 75 h -75 z"/>
<path class="cell" stroke="none" d="M 385 10 h 75 v 75 h -75 z"/>
<rect x="23" y="25" height="50" width="50" id="rect815" fill="red"/>
<rect x="98" y="25" height="50" width="50" id="rect817" fill="yellow"/>
<rect x="173" y="25" height="50" width="50" id="rect817" fill="green"/>
<rect x="248" y="25" height="50" width="50" id="rect817" fill="cyan"/>
<rect x="323" y="25" height="50" width="50" id="rect817" fill="blue"/>
<rect x="398" y="25" height="50" width="50" id="rect817" fill="magenta"/>
</g>
</g>
</svg>