In Pieces – A CSS-based exhibition celebrating evolutionary distinction

I have a Diploma of College Studies (Canada) in Multimedia Integration.

We learned how to create animations, how to render 3D models, how to do videos editing, how to do web front-end (advanced css + js), how to do backend web programming and how to create native apps.

It's a lot easier to be good at css when you actually learn it from teachers.

In the past, the hardest thing about learning CSS had little to do with the language itself, but in dealing with inconsistencies for specific browsers (like "Firefox", as mentioned). Recent efforts by browser manufacturers to render CSS in accordance with standards, along with the advent of pre/post-processing tools, have made it easier for developers to focus on the language.

This one isn't actually /too/ complicated. It certainly uses some advanced techniques -- transitions, clip-paths, nth-child -- and I'm not sure (haven't checked) if or how it works in browsers other than Chrome, but the fact that you _know_ you'll have 30 shards greatly simplifies everything.

If you can have a designer draw up the basic design, then you can one-by-one take the shards & put them into place with CSS. From there you can set up some animations on specific shards to make it seem like everything's moving together. From there, you basically have one animal. It'd be time-consuming, but would work.

The css selector for a particular animal's shards start with a `.<animal>` class selector, so that you change the animal class in a parent and all the shards move into place.

It looks like they're still using some javascript to set "states", which seem to trigger animations. I'm honestly not sure why they decided to do that rather than just using keyframes with animations, though I imagine that it may have been that animations were firing before the transition between animals finished, which would have caused a little bit of weirdness.

Nope, you are not alone. I was looking forward to see some gifs or transparent pngs used as rounded corners.

Edit: the presentation itself is impressive, even with unexpected content

Same here. It clicked when I saw the dolphin.

This really looks nothing like primitive. Primitive has lots of overlaying strokes.

My best friend @wengerstoybus[1] made this! Fun fact, he actually manually illustrated each animal in Illustrator, and then exported them to images that he loaded up in the browser. He then wrote some really quick ’n dirty JS so that he could click each of the points in the image, and he’d get their coordinates fed back to him once he’d completed a whole shape. He could then just plug these coords into the CSS etc voila!

1. https://twitter.com/wengerstoybus

Interesting that it works without JS, given that the page weights 3.5 MB, of which ~1 MB is JS and 700 kB is CSS.

Works just fine in Firefox minus some animations.