Sunday, March 29, 2015

30 endangered species animated with CSS

In Pieces: 30 pieces. 30 species. 1 Fragmented Survival is an impressive CSS-based animation project by designer Bryan James. In the How It's Made section, at the bottom of the main page, James (Twitter) explains:
Since hearing about CSS polygons, I've been a little surprised at the lack of furore around the technology, so I wanted to create something which not only worked as a project in itself, but also pushed this underused line of code as far as possible. (...)
So, in essence — each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.

My student Luís Melgar sent me the link to this project five minutes ago. The only word I wrote in my reply to him: Wow.