DEV Community

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

Posted on • Edited on

15 5 4 5 7

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)

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

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!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay