DEV Community

Cover image for Rainy Clouds CSS Art 🌧️
Divya Patel
Divya Patel

Posted on

2

Rainy Clouds CSS Art 🌧️

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

The inspiration to create rainy clouds comes from the wonderful monsoon season we're experiencing right now. I'm totally obsessed with rains and clouds these days, to the point that I've even got cloud designs on my nails!💅😝
This seasonal obsession makes me want to capture the beauty of rainy clouds in an animation so we can all enjoy.🌧️

Demo

Journey

I visualized the elements of rainy skies, focusing on cloud shapes, movements, and raindrops. I used HTML, CSS, and JavaScript to create and animate these elements and tweaked animations and ensured natural flow for clouds and rain.

I want to explore creating animations for other weather conditions, like sunny skies or thunderstorms.

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