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)
Top comments (2)
On firefox your earth is between flat and being a bagel.
On Chrome it looks round as expected :D
Congrats!
Thank you so much for the feedback @steeve 🙌
I managed to fix it.