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
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.
Top comments (5)
Amazing 🌟
Holy snacks this is amazing! 😮
I'm getting start to feel sorry for the staff. It's going to be real pain to pick out a real winner here =))
wow just wow. this is amazing!
yooo congrats on winning the addition spot dude well deserved!