The latest articles on DEV Community by Divya Patel (@divyapatel01). https://dev.to/divyapatel01 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F780358%2Ffb0c946b-24e3-4053-aeb9-b7899dbe2672.png https://dev.to/divyapatel01 en Divya Patel Fri, 02 Aug 2024 17:08:36 +0000 https://dev.to/divyapatel01/rainy-clouds-css-art-2m16 https://dev.to/divyapatel01/rainy-clouds-css-art-2m16 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, CSS Art: Recreation.</em></p> <h2> Inspiration </h2> <p>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!💅😝<br> This seasonal obsession makes me want to capture the beauty of rainy clouds in an animation so we can all enjoy.🌧️</p> <h2> Demo </h2> <p><iframe src="https://codesandbox.io/embed/mtjwpk"> </iframe> </p> <h2> Journey </h2> <p>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.</p> <p>I want to explore creating animations for other weather conditions, like sunny skies or thunderstorms.</p> frontendchallenge devchallenge css animation