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

Inspiration

When I saw the challenge, my first idea was create an Earth globe drawning, but what else? And inmediatly my head said (and my hands, too): "This could be an animation..." and the rest was magic, basically.

I really love 2D art and animation, so I took my graphic tablet and sketch a basic idea with a natural landscape (mountains, trees, flowing water) and then human industrial activities devastating everything, but delivering a message about hope and with the earth rotating in space at the end.

Once the general idea was ready, I decided create an HTML page with no external elements (images or any other resource), just CSS, including SVG images.

Demo

Dev Earth Day - Jorge del Campo

jorgedelcampo.github.io

Journey

All in this challenge was a journey for me, but things I really loved creating the project was understand how to set an encode SVG as background image. For this, I created my ilustrations (industries, trucks, animals, etc.) on Inkscape, I copied the SVG code and encoded using oksel.github.io/url-encoder.

Another great discovery was to use SVG paths for animations. Unfortunelly, these paths aren't responsive-friendly, but I resolved combining offset-path and translate(x,y) propierties to create a responsive path, and I think it worked!

The animations and timmings were a watchmaking work. Choose the right time to start or stop an animation to match with the next action was a great odisea.

But probably, what I really enjoyed the most was share this creative process with my family (the dog with the family was an idea from my wife and daugther :p)

• Author: Jorge del Campo Andrade (Chile).

• Repo URI: https://github.com/jorgedelcampo/dev_earth_day/tree/main/css_challenge

• Project under MIT licence.