How to Animate SVG with CSS?

Last Updated : 12 Sep, 2024

Animating SVGs (Scalable Vector Graphics) with CSS is a powerful technique to bring vector-based images to life on websites. The SVG animations enhance user experience and add dynamic interactivity to the static visuals. Since SVGs are XML-based each element inside them can be controlled individually with the CSS making it easier to apply animations. we are going to animate SVG with CSS.

Below are the two approaches to animate SVG with CSS:

Table of Content

Using stroke-dasharray and stroke-dashoffset
Using CSS Transforms

Using stroke-dasharray and stroke-dashoffset

This method animates the stroke of SVG paths, creating the effect of the line "drawing" itself.

stroke-dasharray defines the pattern of the dashes and gaps in the stroke. By setting this to the length of the path we can create a dashed line that spans the entire path.
stroke-dashoffset controls where the dash pattern starts. By animating this value we can make the stroke appear to be drawn from the start to end.

Example: In this example, the path is animated using the stroke-dasharray and stroke-dashoffset creating a drawing animation over 4 seconds.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>SVG Stroke Animation</title>
    <style>
        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        path {
            stroke-dasharray: 400;
            stroke-dashoffset: 400;
            animation: draw 4s linear 
            forwards;
            stroke: #000;
            stroke-width: 2;
            fill: none;
        }
    </style>
</head>

<body>
    <svg width="300" height="200"
         viewBox="0 0 300 200">
        <path d="M10 80 Q 95 
        10 180 80 T 290 80" />
    </svg>
</body>

</html>

Output:

Using CSS Transforms

This approach animates SVG elements by the applying CSS transforms like rotate, scale, translate and skew.

transform allows for the rotating, scaling and moving SVG elements.
CSS animations can be used in conjunction with the @keyframes to the create various transformations over time.

Example: In this example, the circle element is animated to the rotate and scale continuously in the 5-second loop using the transform-origin property to the ensure the transformations occur from the center of the circle.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>SVG Transform Animation</title>
    <style>
        @keyframes rotate-scale {
            0% {
                transform: rotate(0deg) scale(1);
            }

            50% {
                transform: rotate(180deg) scale(1.5);
            }

            100% {
                transform: rotate(360deg) scale(1);
            }
        }

        circle {
            animation: rotate-scale 5s infinite;
            transform-origin: center;
            fill: #3498db;
        }
    </style>
</head>

<body>
    <svg width="200" height="200"
         viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="50" />
    </svg>
</body>

</html>

Output:

Conclusion

Animating SVGs using the CSS is a simple yet powerful technique that brings static illustrations to life. Whether we're animating strokes with the stroke-dasharray and stroke-dashoffset or using the transform properties for the rotating and scaling CSS allows for the creating dynamic engaging web animations without the need for the external libraries.

How To Make Charts With SVG?

gururaj69bn

Improve

Article Tags :

How to Animate SVG with CSS?

Using stroke-dasharray and stroke-dashoffset

Using CSS Transforms

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?