This is a submission for Frontend Challenge v24.09.04, CSS Art: Space.

Inspiration

For this CSS Art: Space challenge, I wanted to capture the mesmerizing beauty of a solar eclipse. The inspiration came from the dance-like interplay between light and shadow during this celestial event. I titled my piece "Dance of Shadows, a Solar Eclipse" to evoke the graceful movement and interplay of cosmic bodies.

Demo

Journey

Creating this CSS art piece was an exciting journey of exploration and learning. Here's a breakdown of my process and the key aspects I focused on:

1. Circular Geometry: I used CSS border-radius to create perfect circles for the sun and moon. The challenge was in positioning them precisely to create the eclipse effect.

2. Animation: The core of this piece is the animation. I used CSS @keyframes.

3. Shadows and Lighting: To create a realistic eclipse effect, I implemented multiple shadow layers using box-shadow. This helped create depth and the illusion of light bending around the moon.

4. Color Palette: I chose a dark background to represent space, with vibrant oranges and yellows for the sun. The moon is represented by a dark circle with a subtle glow to mimic the corona visible during a total solar eclipse.

This challenge pushed me to think creatively about how to represent complex astronomical phenomena using only CSS. It was a great opportunity to deepen my understanding of CSS animations and transforms while creating something visually striking.

In the future, I'd love to expand on this concept by adding more celestial bodies or incorporating interactive elements that respond to user input. Perhaps adding stars that twinkle or allowing users to control the speed of the eclipse would make for an even more engaging experience.