Frontend Challenge: CSS Art -December Edition

#frontendchallenge #devchallenge #css

CSS Art Challenge 2024

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

After stumbling upon Bryan James' site, where he created 30 endangered species utilizing CSS polygons, I took it as a sign to start experimenting with this nifty tool.

Demo

https://emmy-zhang.github.io/css-art/

Journey

Sketch: Sketched out a partridge in triangles, inspired by the song 12 Days of Christmas.
Outline: Outlined the elements in HTML, roughly molded them into the desired shapes with CSS polygons.
Refine: Manually shifted the elements into place.
Styling: Updated colors, added some animation for pizzaz.
Mobile: Well, there's a reason why they say "mobile first." Upon testing on smaller screens the elements scattered, so I manually updated the element's height and width to accommodate smaller screens.

In Bryan James' site a JS tracer was used on existing images to create the polygons. I opted for a less sophisticated approach for time and sanity sake, but I imagine with a tracer the polygons could have been created dynamically and would have made mobile styling and animations a lot easier - perhaps a project for next time :) I had fun and learned quite a bit with this one though!