DEV Community

Cover image for Frontend Challenge: Animated Globe CSS Art: Earth Day
Gabriel Sena
Gabriel Sena

Posted on

1

Frontend Challenge: Animated Globe CSS Art: Earth Day

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

Inspiration

The word 'earth' represents to me a globe, and, on current days, the news about climate changes calls our attention. So, I decided to use this challenge to challenge myself by developing an animated globe with climate change representation using only CSS. 🌍 🤯

Demo

Link to Demo

Link to Code - Repository

Screenshot
earth image

Journey

globe earth states workflow
To start this challenge, I decided to brainstorm my ideas using Asesprite to create globe illustrations and it's states.

After that, I ran to code and created the first state: the globe. Then, I developed the others states: fires and water overflow.

To help me a develop these states, I decided to use the power of css variables to I am not get lost and keep my code readable to keep going.

The major problem to develop this illustration pixel by pixel, is because is really hard to work with it. To make more easier, I used the box-shadow tecnique to help me a create something like a "canvas" to point these points like a editor.

After making these states, I started building my CSS animation to sync everything and tried to make more smooth possible.

And there you have it! I'm proud to have developed this CSS art =)

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay