DEV Community

depa panjie purnama
depa panjie purnama

Posted on

1

Dance of Shadows, a Solar Eclipse.

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

dance of shadows

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up