DEV Community

Cover image for Happy Earth Day
Jorge del Campo
Jorge del Campo

Posted on • Edited on

Happy Earth Day

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

Screenshot Dev Earth Day challenge CSS animation

Dev Earth Day - Jorge del Campo

favicon 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)

Top comments (5)

Collapse
 
arndom profile image
Nabil Alamin

Amazing 🌟

Collapse
 
schmoris profile image
Boris

Holy snacks this is amazing! 😮

Collapse
 
ngdangtu profile image
Đăng Tú

I'm getting start to feel sorry for the staff. It's going to be real pain to pick out a real winner here =))

Collapse
 
mfalconi profile image
mfalconi

wow just wow. this is amazing!

Collapse
 
mfalconi profile image
mfalconi

yooo congrats on winning the addition spot dude well deserved!