If you haven’t already seen species-in-pieces.com, do yourself a favor and go check it out. It’s a stunning personal project by Bryan James, showcasing 30 endangered species made up of 30 polygons each. What’s perhaps most impressive, specifically relating to the animals and their polygons / animation, is that Bryan isn’t making use of WebGL or Canvas. This is all pure CSS.
“But how?!” you might ask. Well, put seat belts on your eyes, because I’m about to take them on the ride of their lives.
The technique Bryan utilizes makes use of stacking block-level elements, such as <div> tags, on top of one another, and then “cutting out” shapes using clip-path. clip-path accepts a single argument for various functions for drawing shapes; circle, polygon, ellipse, etc. Each of the polygons can have a CSS transition applied to them, allowing for movement of their point’s x and y coordinates. Let’s take this line of code for example:
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
The above line of code shows a clip path using the polygon function to create a right angled triangle. The function takes n number of points in coordinate pairs. That is, for the first pair (0 0) we’re telling the browser to plot the first point at 0 on the x axis, 0 on the y axis. The second pair (0 100%), we’re telling the browser to plot the second point at 0 on the x axis, 100% on the y axis. And for the last point, 100% on the x, 100% on the y. Thus making our triangle complete.
Here’s what it looks like in action. Be sure you’re viewing this in Chrome or Safari.
It’s easy to see how tedious creating these animals and their complex shapes can be — not something to be taken lightly. A visual aid for plotting these points, such as Clippy, will speed things up. It’s also worth noting that Illustrator designs can be saved out as .svg files, which will list out polygon points. This data could then be converted into clip paths either manually or with a fairly simple script.
Speaking of Illustrator, clip-path can also reference .svg files, which could speed up coding time tremendously. Although, the big draw back to referencing .svgs is that doing so makes animating individual polygons either extremely difficult or impossible.
There are certain limitations to clip-path. Browser support is pretty limited. At the time of writing, it’s mostly just webkit browsers (i.e. Chrome and Safari). CSS transforms seem to freak out the browser, too, so that means no transforms. All rotations or scaling have to be done “by hand” by re-plotting x and y coordinates for each of the polygons’ points.
Look around for other examples online. So play around with this method, see what you can create, and be sure to share it back with us.