This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Inspiration
I was inspired by a video from National Geographic. And decided to recreate it, but in a CSS manner.
I wanted people to watch this video through my website.
Demo
You can view the live demo on Vercel.
Project Demo
Source Code
Journey
At first, I wanted to recreate the image in the form of pixels. But it turned out to be tedious and not very high quality.
Then I decided to base the images on rollers. And then I was very excited, because my persistence knew no bounds then. To make the pictures fit exactly around the circle, I created a circle class in CSS.
In the end, it turned out pretty well.
But it was not enough for me, and I decided to do something responsive. And then I realized that my persistence was quickly fading. Because everything was done manually.
I had to change each parameter of the image, selecting the anchor circles. And even then, I did not cover many sizes.
A few days ago I wanted to add more animations, like a butterfly waving its wings, or a fish twitching in its own way, but... I'm going to stop for now. I need a break after all the manual work.
Thank you for this challenge!
Top comments (2)
Screenshot looks good but the project demo requires vercel Auth for viewing
Ah, now I understand why a friend couldn't visit this site. Vercel has changed its usage policy, apparently I read it carelessly. Thank you so much! I deployed it on GitHub.