In pieces is an interactive exhibition turned study into 30 of the world’s most interesting and unfortunately endangered species.
The site is very interactive. All the animals are shown with lines and angles. The founder of the website is Bryan James, a 28 years old British website designer. He wanted to create something which not only worked as a project in itself, but also pushed this underused CSS polygons 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. He wanted to focus purely on the CSS route.
The code is: -webkit-clip-path: polygon( 40% 40%, 50% 60%, 60% 40% );
Even it looks pretty simple, it is scary to see the whole page of codes with enumerous -webkit-clip-path: polygon(%%%%%%). So it is not hard to imagine how many work James has put into this website. It is not something I can take from the website immediately but maybe I will be able to work on a project where I can put this into use.