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.

Project 1.1: The Animated Sun Icon

Let’s start by building a radiant animated sun.

Step 1: HTML Setup and Basic SVG Canvas

Create an index.html file and a style.css file. Set up your basic HTML structure and include the <svg> element.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Animated Weather Icons</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Animated Weather Icons</h1>

        <div class="icon-container">
            <!-- Sun Icon SVG -->
            <svg class="weather-icon" viewBox="0 0 100 100">
                <!-- Sun elements will go here -->
            </svg>
        </div>
    </body>
</html>

style.css (Initial, we’ll add more later)

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f8ff; /* Alice Blue */
    margin: 0;
}

h1 {
    color: #333;
    margin-bottom: 40px;
}

.icon-container {
    display: flex;
    gap: 50px;
    padding: 20px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.weather-icon {
    width: 150px;
    height: 150px;
    overflow: visible; /* Allows elements to animate outside the viewBox if needed */
}

Step 2: Drawing the Sun (Core Shapes)

Inside your <svg> element for the sun, add a circle for the sun’s body and several rectangles for the rays. Use <g> to group the rays.

index.html (inside <svg> for Sun Icon)

<g class="sun-body">
    <circle cx="50" cy="50" r="25" fill="#FFD700" stroke="#FFA500" stroke-width="2" />
</g>
<g class="sun-rays" transform="translate(50, 50)">
    <!-- Rays are positioned relative to the center of the sun (50,50) in their own group -->
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(45)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(90)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(135)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(180)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(225)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(270)" />
    <rect x="-3" y="-35" width="6" height="15" rx="3" ry="3" fill="#FFA500" transform="rotate(315)" />
</g>

Explanation:

The sun-body group contains the central circle.
The sun-rays group is translated to (50,50) (the center of the viewBox). This simplifies positioning the rays: they are defined as being above the center (y="-35") and then rotated around the group’s origin, which is now the center of the sun. rx and ry give them rounded ends.

Step 3: Animating the Sun Rays (CSS Keyframes)

Now, let’s make the rays spin and perhaps pulse a bit.

style.css (add these animations)

/* ... existing styles ... */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.sun-rays {
    animation: spin 10s linear infinite; /* Rays continuously spin */
    transform-origin: 50% 50%; /* Make sure they spin around their group's center */
}

.sun-body circle {
    animation: pulse 2s ease-in-out infinite alternate; /* Sun body subtly pulses */
    transform-origin: center;
}

Result: You should now have a sun icon with spinning rays and a gently pulsing center!

Project 1.2: The Animated Cloudy Icon

Next, let’s create a dynamic cloud icon.

Step 1: Add SVG Canvas for Cloud

Add another <svg> element to your icon-container in index.html.

index.html (inside icon-container)

<div class="icon-container">
    <!-- Sun Icon SVG (already done) -->
    <svg class="weather-icon" viewBox="0 0 100 100">
        <!-- ... sun code ... -->
    </svg>

    <!-- Cloud Icon SVG -->
    <svg class="weather-icon" viewBox="0 0 100 100">
        <!-- Cloud elements will go here -->
    </svg>
</div>

Step 2: Drawing the Cloud (Paths and Circles)

Clouds are best made from overlapping circles or paths. A path can give a smoother, more irregular shape. Let’s use a combination for a stylized look.

index.html (inside <svg> for Cloud Icon)

<g class="cloud">
    <!-- Main cloud body using a path -->
    <path
        d="M 20 50 Q 0 30 20 20 T 60 20 T 80 40 Q 100 60 80 70 Z"
        fill="#b0c4de"
        stroke="#708090"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
    />
    <!-- A few overlapping circles for fluffiness -->
    <circle cx="40" cy="40" r="20" fill="#b0c4de" />
    <circle cx="65" cy="45" r="25" fill="#b0c4de" />
</g>

Explanation:

The <path> element forms the main shape of the cloud using quadratic Bézier curves (Q and T) for a fluffy appearance.
A couple of overlapping circles add more volume and an irregular shape.
stroke-linecap="round" and stroke-linejoin="round" ensure smooth edges for the path.

Step 3: Animating the Cloud (CSS Translate)

Clouds typically drift. Let’s make our cloud gently move horizontally.

style.css (add this animation)

/* ... existing styles and sun animations ... */

@keyframes drift {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

.cloud {
    animation: drift 5s ease-in-out infinite alternate; /* Cloud gently drifts */
    transform-origin: center; /* Ensure transformation is smooth */
}

Result: You should now have a sun and a drifting cloud.

Project 1.3: Challenge - The Rainy/Stormy Icon

Now it’s your turn! Create a “Rainy” or “Stormy” icon using the techniques you’ve learned.

Your Goal:

Add a new <svg> element for your icon.
Design a cloud, similar to the one above, or a darker, more angular storm cloud.
Add raindrops (small circles or lines) for a rainy icon, or lightning bolts (paths/polygons) for a stormy icon.
Animate these elements:
- For rain: Make raindrops fall (translateY) and fade out (opacity).
- For lightning: Make it flash (opacity) or appear/disappear.
- Consider making the cloud slightly darker or adding a subtle shake animation for a stormy feel.

Hints:

Use multiple <animate> or CSS @keyframes animations for complex interactions.
animation-delay can be useful for staggering rain drops or lightning flashes.
You might want to define a raindrop or lightning bolt as a <symbol> in <defs> and then <use> it multiple times for efficiency, especially if animating each instance differently.

Take your time, experiment, and don’t be afraid to make mistakes! This is how you learn.

Guided Project 1: Creating an Animated Weather Icon Set

// table of contents