‘In Pieces’ is a phenomenal CSS-based interactive experiment bringing awareness to 30 endangered species. It’s difficult to put into words what Amsterdam-based interactive designer, Bryan James, has achieved in this incredible One Pager – make sure you read his build notes in this review. If you missed it, here are last years Top 20 One Page Websites.
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.
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.
Here is an in-depth making of 'In Pieces' on Smashing Magazine.
