National Geographic Earth Day 2024

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!