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.


  1. One thing I learned in life is to love what makes you happy and to cherish every moment you spend with your family, friends or love ones because everything that we have now on earth is temporary. Well, thank you for inspiring us with your great art work.

  2. He illustrate the images (presumably in some 3d rendering program), then use a custom tracing function to generate triangles and their coordinates, then animates them using css3 transitions. This sounds like an opportunity for a marketable tool set– no one in their right mind would hand craft coordinate points like this, and I suspect Luis already has some nifty tools to help himself along.