In Pieces

‘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.
Tailwind CSS and Refactoring UI
New Podcast
Tailwind CSS founder Adam Wathan is the latest Yo! Podcast guest.