Species in Pieces - Amazing CSS Animated Endangered Species

[Arthur]

Really impressive considering it's done entirely in CSS. Click the link to see all of the animals.

 

Link: species-in-pieces.com (Blink or WebKit-based browser required)

 

http://a.pomf.se/vjxfjl.gif

 

How It's Made

Born out of tinkering with a simple property, this project is unabashedly part-digital experiment. The core technology used here is just good old CSS — no Canvas or WebGL witchcraft.

 

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.

 

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. I wanted to focus purely on the CSS route.

 

Not heard of it? Here, take a line:

-webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

 

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.

Edited March 18, 2015 by Arthur