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 devastate everything, but always knowing history had to end with the Earth rotating in space.
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
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 fire 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 family and the dog was an idea from my wife and daugther :p)
Author: Jorge del Campo Andrade (Chile).
Repo URI: https://github.com/jorgedelcampo/dev_earth_day.git
Project under MIT licence.
