Nerding Out

This project derived its inspiration from the amazing website Species in Pieces. I later found an article by Smashing Magazine in which they provide a pretty detailed how-to guide of how Species in Pieces as built.

This inspired me to go back through some of my old adobe illustrator projects and see what I could make behave like this. One thing that caught my eye was a drawing I made in college, when I had taken a Tai chi class and drew out the positions for a final project. When i got into graphic design I revisited that drawing and built it out in vector with Adobe Illustrator.

Revisiting this yet again, the real challenge was transforming the concept as into vis-à-vis the style of Species in Pieces. First I had to map out each triangle into its own div using ‑webkit‑clip‑path. 44 divs later I came up with this guy, and now its time to animate it.

Animation was achieved through @‑webkit‑keyframes and essentially tweening the shape of each div to new coordinates and then back again. Most of the secondary animations were convieved in browser to see what felt right. Keeping track of all the coordinates easily starts to pile up and become a bit of a chore. If I ever re-visit this project I would make each coordinate a SASS variable ‑webkit‑clip‑path: polygon( VAR1 ,VAR2 ,VAR3 );

But alas hindsight is 20/20. All said and done it was a pretty excellent adventure in cutting edge browser technology