CSS Art: Earth Day 2024

Barry Els — Sun, 28 Apr 2024 09:13:07 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

Earth's composition is fascinating. I thought I'd take this opportunity to create a single page that covers some of its high-level layers.

Demo

Journey

I wondered how far you could get without having to rely on JavaScript. Admittedly, I had way too much fun with the spinning Earth portion, and ran out of time for the rest of the site (which is probably apparent 😅), but it was just fun to mess around with plain ol' CSS for a change and not think too hard about things.

Learned

I learnt a lot about Earth's composition, it's actually pretty difficult to summarise since there are various perspectives you could use as your lens, plus there's not a lot of direct measurements we can make about its deeper parts, for obvious reasons.

Next Steps

Things I'd like to get to:

Flesh out each of the layers with more detail
Add more animations per layer
Ensure everything's semantically and accessibly marked up

Credits

You can scroll all the way down to the bottom of the actual submission for credits, but also here:

Data gleaned from: SEG Wiki & Wikipedia here, here and here
Visual inspiration drawn from: Kurzgesagt
Icons from: Iconoir
Landscape image: insspirito (Pixabay)