You know when you just stumble across something on the web that grabs you? You start looking at it. The graphics entice you further. Your curiosity is aroused by the content. You start exploring. Before you know it, you’re tumbling down the rabbit hole and a whole portion of your day has disappeared!
That’s what it was like when we discovered species-in-pieces.com by Bryan James. It’s an interactive exhibition that highlights the stark future faced by 30 endangered species. But the real interest for us was in its exploration of the use of CSS polygons and how it has pushed this underused line of code into the limelight (elements of the website have been shared globally with international conservation groups such as Greenpeace).
There is something very pure about it that really works. The core technology being used is good old CSS, so just as is stated on the website, there’s no Canvas or WebGL witchcraft going on.
In essence, each shape is being morphed, moved and manipulated by a new set of coordinates. As they are maintained by triangles throughout, this means three points, with CSS transitions, to link up the movements. No tricks or tools have been used to get the illustrated results, which we’re sure you’ll agree are quite beautiful.
We particularly like the geometric transitions and movement being depicted by the piston graphic that adjusts with each position. Lots of thought has gone into spreading the word too. People are encouraged to download their favourite as wallpaper, or share and via social media. There’s also detailed information on each species and the threat it faces.
Of course, with a kiwi at the helm, we’re especially drawn to No.12, the Kakapo. Whereas Brant is keen to earn his wings, the heaviest parrot in the world had no use for them as it evolved in isolation without predators in New Zealand. It is now seriously threatened as a result of over-hunting in the past, the introduction of predators such as stoats and the encroachment of its habitat by humans. But it is also one of the few success stories highlighted by the project. Through an extensive recovery program, numbers are now growing slowly and its future is looking a little brighter.
You can check out the project here
You can check out how we can make your own digital future a bit brighter here