Guided Project 1: Creating an Animated Weather Icon Set

Sun, 02 Nov 2025 18:00:00 +0530

11. Guided Project 1: Creating an Animated Weather Icon Set

In this project, you’ll apply many of the concepts learned so far to create a set of animated weather icons. We’ll start with a “Sun” icon, then a “Cloudy” icon, and challenge you to create a “Rainy” or “Stormy” icon. This project emphasizes basic shapes, grouping, CSS styling, and keyframe animations.

Project Objective

To create a visually appealing and animated set of weather icons using SVG, HTML, and CSS. Each icon should have at least one dynamic animation.

Weather Icons on AI VOID

Guided Project 1: Creating an Animated Weather Icon Set

11. Guided Project 1: Creating an Animated Weather Icon Set

Project Objective