‘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. Easy contender for One Pager of the year. 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.
