In Pieces – 30 Endangered species, 30 pieces

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.

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.
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.
Advertisements

One thought on “In Pieces – 30 Endangered species, 30 pieces

  1. This is a very cool site, and it’s interesting to see all the transitions that the shapes make. I can’t imagine how much time and effort went into making each shape the perfect size, shape and color. I think he did a tremendous job on this site. What strikes me more is how easy the site is to use. The transitions are seamless and navigation makes sense.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s