CSS Tutorials

Styling and Animating SVGs with CSS

SVGs feature animations and transitions and can be customized using CSS. Without the need for extra JavaScript or picture files, this feature enhances user engagement by enabling dynamic interactions and visual effects.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated SVG Example</title>
    <style>
        svg {
            height: 100px;
            width: auto;
        }
        circle {
            transition: fill 0.5s ease;
        }
        circle:hover {
            fill: blue;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        svg:hover {
            animation: rotate 2s linear infinite;
        }
    </style>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" />
    </svg>
</body>
</html>

This example shows how to animate an SVG circle and apply CSS style.

When the circle is hovered over, a CSS transition causes its fill color to shift to blue.

The @keyframes rule named rotate is used to continually rotate the whole svg element when it is hovered.

This demonstrates how to use basic CSS animations to create dynamic and eye-catching SVG visuals.

logo

CSS

Styling and Animating SVGs with CSS

Beginner 5 Hours

SVGs feature animations and transitions and can be customized using CSS. Without the need for extra JavaScript or picture files, this feature enhances user engagement by enabling dynamic interactions and visual effects.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated SVG Example</title>
    <style>
        svg {
            height: 100px;
            width: auto;
        }
        circle {
            transition: fill 0.5s ease;
        }
        circle:hover {
            fill: blue;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        svg:hover {
            animation: rotate 2s linear infinite;
        }
    </style>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" />
    </svg>
</body>
</html>

This example shows how to animate an SVG circle and apply CSS style.

When the circle is hovered over, a CSS transition causes its fill color to shift to blue.

The @keyframes rule named rotate is used to continually rotate the whole svg element when it is hovered.

This demonstrates how to use basic CSS animations to create dynamic and eye-catching SVG visuals.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved