Advanced SVG – Animations | Lecture 43

Let’s begin with Lecture 43 of the HTML5 & CSS3 series. Advanced SVG – Animations, Filters & Complex Paths. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Know how to animate SVG elements using CSS and JavaScript
Be able to apply filters and effects like blur, shadow, and color change
Understand how to draw with <path> using commands like M, L, C, Q, and Z
Build an animated logo , icon , or SVG spinner
Make your SVG graphics more dynamic and visually rich!

🌀 What You’ll Learn Today

TOPIC	DESCRIPTION
SVG Animation with CSS	Animate colors, shapes, and paths
SVG Animation with JavaScript	Control animations dynamically
Filters in SVG	Add blur, drop shadows, and other effects
Path Commands	Draw complex shapes using`d`attribute
Interactive SVG Elements	Respond to clicks and hovers

📜 Review: The `<path>` Element

The <path> element is one of the most powerful in SVG — it lets you draw any shape .

Common Path Commands:

COMMAND	MEANING
`M x y`	Move to a point (start drawing from here)
`L x y`	Draw a straight line to that point
`Q x1 y1, x y`	Quadratic curve
`C x1 y1, x2 y2, x y`	Cubic curve
`Z`	Close path (connect last point to first)

Example:

<path d="M10 10 L90 10 L50 70 Z" fill="blue"/>

This draws a triangle.

🎨 SVG Filters – Add Effects Like Blur and Shadow

Use <filter> inside your SVG to add visual effects.

Example: Drop Shadow

<svg width="200" height="200">
    <defs>
        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#333" />
        </filter>
    </defs>

    <circle cx="100" cy="100" r="50" fill="orange" filter="url(#shadow)" />
</svg>

You can also use filters for:

Blur (<feGaussianBlur>)
Color matrix (<feColorMatrix>)
Brightness/contrast changes

🧪 Try This: Animate a Spinning SVG Spinner

Let’s create a spinning loading spinner using SVG + CSS animation .

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

svg-spinner.html

Step 2: Add This Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated SVG Spinner</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f4f4f4;
            text-align: center;
        }

        .spinner {
            width: 100px;
            height: 100px;
            animation: spin 1s linear infinite;
        }

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

        svg circle {
            transition: stroke 0.3s ease;
        }

        svg:hover circle {
            stroke: #e74c3c;
        }
    </style>
</head>
<body>

    <h2>Spinning SVG Spinner</h2>

    <svg class="spinner" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="#3498db" stroke-width="10" fill="none" />
    </svg>

    <p style="margin-top: 20px;">Hover over the spinner to change its color!</p>

    <p><a href="index.html">Back to Home</a></p>

</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve built a fully animated spinner — perfect for loading indicators or buttons!

💡 Bonus: Animate SVG with JavaScript

Let’s make the spinner grow and shrink while rotating.

Update Your CSS:

.spinner {
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
}

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

Add JavaScript:

<script>
    let spinner = document.querySelector(".spinner");
    let scale = 1;
    let direction = 1;

    function animateSpinner() {
        scale += 0.01 * direction;

        if (scale > 1.2 || scale < 0.8) {
            direction *= -1;
        }

        spinner.style.transform = `scale(${scale})`;
        requestAnimationFrame(animateSpinner);
    }

    animateSpinner();
</script>

Now your spinner grows and shrinks smoothly while rotating — double animation!

🖌️ Use `<path>` to Draw a Heart

Let’s draw a heart using the <path> element.

<svg width="100" height="100" viewBox="0 0 100 100">
    <path d="M10 30 C10 10, 50 0, 50 30 C50 0, 90 10, 90 30 L90 90 L10 90 Z"
          fill="red" stroke="black" stroke-width="2"/>
</svg>

This uses cubic curves to create a smooth heart shape.

💡 Bonus: Create an Animated Checkmark

Let’s build a checkmark that appears with animation.

Add HTML:

<h2>Animated Checkmark</h2>
<svg id="checkmark" width="100" height="100" viewBox="0 0 100 100">
    <path d="M20 50 L40 70 L80 30" stroke="green" stroke-width="5" fill="none" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="100" />
</svg>

Add CSS:

#checkmark path {
    animation: draw-check 1s forwards;
}

@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

Now the checkmark draws itself when the page loads!

💡 Bonus: Make an Interactive Button with SVG Icon

Let’s create a button with an SVG icon that changes on hover.

Add HTML:

<style>
    .icon-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .icon-button:hover {
        background-color: #2980b9;
    }
</style>

<button class="icon-button">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
    </svg>
    Send Message
</button>

Now you have a beautiful button with a scalable icon — ready to use in any website!

🧪 Try It Yourself!

Add a pulse animation to your smiley face using @keyframes
Make the heart turn into a star when clicked using JavaScript
Use <filter> to add a glow effect to your spinner
Build a progress bar using SVG arc paths and JS updates

✅ Summary of What You Learned Today

CONCEPT	CODE EXAMPLE
SVG Path	`<path d="M10 10 L90 10 L50 70 Z" />`
Animation with CSS	`animation: spin 1s linear infinite`
Animation with JS	`requestAnimationFrame()`and`transform`
SVG Filters	`<filter id="shadow"><feDropShadow ... /></filter>`
Stroke Drawing Animation	`stroke-dasharray`+`stroke-dashoffset`
Responsive SVG	Use`viewBox`for scaling
Interactive SVG	Add event listeners like`onclick`or`onhover`

🚀 Next Lecture Preview:

In Lecture 44 , we’ll learn how to build responsive layouts using CSS Grid and Flexbox together — so you can combine their powers and create advanced, adaptive designs that look great on all devices!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series

Advanced SVG – Animations | Lecture 43

🎯 Objective:

🌀 What You’ll Learn Today

📜 Review: The <path> Element

Common Path Commands:

🎨 SVG Filters – Add Effects Like Blur and Shadow

Example: Drop Shadow

🧪 Try This: Animate a Spinning SVG Spinner

Step 1: Create a New File

Step 2: Add This Code

Step 3: Run with Live Server

💡 Bonus: Animate SVG with JavaScript

Update Your CSS:

Add JavaScript:

🖌️ Use <path> to Draw a Heart

💡 Bonus: Create an Animated Checkmark

Add HTML:

Add CSS:

💡 Bonus: Make an Interactive Button with SVG Icon

Add HTML:

🧪 Try It Yourself!

✅ Summary of What You Learned Today

Najeeb Alam

Related Posts

Introduction to SVG | Lecture 42

Advanced Canvas Features | Lecture 41

Introduction to HTML5 Canvas API | Lecture 40

📜 Review: The `<path>` Element

🖌️ Use `<path>` to Draw a Heart