Animated Water Cycle
This prompt requests an animated React SVG visualization of the water cycle, featuring evaporation, condensation (with lightning), and precipitation, all within a single HTML file.
Prompt
Create an animated visualization of the basic water cycle using React, SVG, and inline CSS. Focus on the three key processes: evaporation, condensation, and precipitation. Your animation should include:
1. Ocean or Lake: Show a body of water at the bottom of the scene.
2. Sun: Show the sun giving off heat to stimulate evaporation.
3. Atmosphere: Show the space where water vapor rises and clouds form.
4. Cloud: Illustrate the formation and growth of clouds.
5. Rain: Show rainfall returning water to Earth.
Animate these key processes:
• Water molecules rising from the body of water as vapor (evaporation)
• Water vapor condensing to form a cloud (condensation)
• Water droplets falling as rain (precipitation)
Use a simple color scheme: blue for water, yellow for the sun, white for clouds, and a light blue background for the sky. Add basic labels for each process.
Make the condensation phase more visually appealing and add lightning bolts during precipitation
Give it as an html file.