09 Apr Species in Pieces – A CSS experiment

Towards the end of 2013, a new building block for web designers was introduced. This amazing piece of code comes in the form of CSS Shapes – a line of coding that creates a polygon which can be rotated and stretched to create visual effects without using an image.

Amsterdam-based interactive designer Bryan James has used CSS shapes to draw awareness towards 30 of the world’s most endangered species.

Each illustration uses 30 CSS polygons, rotated, connected and coloured to create a low-poly illustration. Every triangle is coded similar to this: -webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );

Bryan’s illustration of ‘Wallace’s Birdwing’ butterfly is one of DesignStreet’s favourites.

Check out the other 29 endangered animals here.
Source: Species In Pieces and One Page Love