CSS Art: Earth Day 2024

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)