Project: Code a Morph SVG animation. I decided to create this animation for the 2020 college football playoff. The animation would morph to show all the teams still in contention to make the playoffs.
Process: Created logos in Adobe Illustrator using only one path. In order for the coded animation to work properly, each logo could only be one path. Adding more paths would throw off the logo's ability to transform. I also created the container that the animation sits in. After the logos and container were created they were exported as SVGs. Once I had everything exported from Illustrator I added the SVG's to the HTML, provided each shape team a class, used their classes to code the CSS and give each team their colors, and lastly, I coded the JavaScript to produce the animation order and rhythm.
Reflection: This project helped me better understand JavaScript and the different things you can do with it. It was very fun to re-imagine some of the college logos and what they would look like if they were created using only one path. I think this animation came out great and is another example of how we can use animation to catch people's attention.
Code Link: https://codepen.io/jfennell/pen/oNNPByR
