How it's made species-in-pieces

转载地址:http://www.webhek.com/misc-res/species-in-pieces/#

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!