About this project
In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species — their survivals laying literally, in pieces.
As Featured On
Each species has a common struggle and is represented by one of 30 pieces which come together to form one another. The collection is a celebration of genic diversity and an attempting reminder of the beauty we are on the verge of losing as every moment passes. These 30 animals have been chosen for their differences, so that we can learn about species we didn't know about previously as well as the struggles they have surviving. Many of them evolved in a particular way which makes them evolutionarily distinct.
Take for example the Kakapo, an animal which evolved without natural predators and thus didn’t require instincts to defend itself. Unfortunately — and as is the case with most of the species showcased here — humans began easily hunting upon encroaching their range, then introduced the stoat and other forms of pest control for other species. The Kakapo was almost completely wiped out through this introduction and fights on today because of this catastrophic lack of judgement.
When you dig into a lot of research around this topic, it’s not long before you see the real darkness that is going on. Millions of years of evolution has occurred and humans are in danger of ruining it through desperation for financial gain or greed.
There are some species here who as grim as it sounds, would require a small miracle to survive because the numbers are too low to rationally continue to exist, Vaquita being one such example.
In Pieces hopes to educate and inspire, and provoke thought on this complex and intricate topic. I sincerely hope that you can take something new away and enjoy this collection as much as I enjoyed researching, designing and building it.
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.
If you have any questions on the technique or the project at all, please feel free to whip me a Tweet!