Svg animations

How to create better SVG animation?

What is SVG?

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviours are defined in XML text files. This means that they can be searched , scripted, and compressed as XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

Also, learn about what is serverless Computing: visit

Advantages of SVG over other image formats:

  • SVG images can be created and edited with any text editor
  • SVG images can be searched, indexed, scripted, and compressed
  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable
  • SVG graphics do NOT lose any quality if they are zoomed or resized

SVG animation​ ​e​x​a​m​p​le​ :

svg animations

CODE :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Svg animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg width="478" height="336" viewBox="0 0 478 336" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="other">
<path id="Vector" d="M405.703 336C445.632 336 478 331.101 478 325.057C478 319.013 445.632 314.114 405.703 314.114C365.775 314.114 333.407 319.013 333.407 325.057C333.407 331.101 365.775 336 405.703 336Z" fill="#3F3D56"/>
<path id="Vector_2" d="M466.852 284.767C466.71 308.277 451.421 316.408 432.623 316.312C432.186 316.31 431.751 316.304 431.319 316.292C430.448 316.271 429.586 316.23 428.733 316.17C411.774 314.982 398.644 306.286 398.776 284.421C398.912 261.794 430.618 233.399 432.996 231.3C432.998 231.3 432.998 231.3 433 231.298C433.09 231.218 433.137 231.178 433.137 231.178C433.137 231.178 466.994 261.258 466.852 284.767Z" fill="#6C63FF"/>
<path id="Vector_3" d="M431.405 312.71L443.951 296.821L431.363 314.461L431.319 316.292C430.448 316.271 429.586 316.23 428.733 316.17L430.217 292.657L430.207 292.475L430.23 292.44L430.371 290.219L417.967 272.408L430.419 288.554L430.447 289.025L431.568 271.26L420.968 252.866L431.718 268.138L432.996 231.3L433.001 231.177L433 231.298L432.649 260.352L443.38 248.888L432.588 262.854L432.21 278.765L442.261 263.545L432.156 281.104L431.946 289.951L446.527 268.769L431.871 293.037L431.405 312.71Z" fill="#3F3D56"/>

<path id="Vector_13" d="M399.687 297.216L392.578 321.379C392.578 321.379 378.359 329.05 387.141 330.584C395.923 332.118 404.706 329.05 404.706 329.05L408.888 317.927L413.07 315.626V327.515H414.324L417.252 311.791C417.252 311.791 416.834 303.736 414.324 302.969C411.815 302.202 410.56 297.983 410.56 297.983L399.687 297.216Z" fill="#2F2E41"/>
<path id="Vector_14" d="M390.56 112.94C390.56 112.94 380.032 118.489 380.032 118.872C380.032 119.256 381.286 125.392 381.286 125.392C381.286 125.392 368.322 137.282 142.843C415.37 142.843 388.814 127.694 388.814 123.475C388.814 119.256 390.56 112.94 390.56 112.94Z" fill="#3F3D56"/>

<path id="Vector_43" d="M253.69 245.668L247.39 239.472L254.145 233.694L260.446 239.889L253.69 245.668ZM248.394 239.505L253.725 244.747L259.441 239.857L254.11 234.615L248.394 239.505Z" fill="#F0F0F0"/>
</g>
<g id="blue">
<path id="Vector_44" opacity="0.3" d="M229.236 286.152C263.608 286.152 291.472 260.598 291.472 229.076C291.472 197.554 263.608 172 229.236 172C194.864 172 167 197.554 167 229.076C167 260.598 194.864 286.152 229.236 286.152Z" fill="#6C63FF"/>
</g>
<g id="pink">
<path id="Vector_45" opacity="0.3" d="M141.786 118.853C170.214 118.853 193.259 97.7184 193.259 71.6474C193.259 45.5763 170.214 24.4415 141.786 24.4415C113.358 24.4415 90.3123 45.5763 90.3123 71.6474C90.3123 97.7184 113.358 118.853 141.786 118.853Z" fill="#FF6388"/>
</g>
<g id="green">
<path id="Vector_46" opacity="0.3" d="M42.1145 230.86C58.9129 230.86 72.5306 218.371 72.5306 202.965C72.5306 187.56 58.9129 175.071 42.1145 175.071C25.3162 175.071 11.6985 187.56 11.6985 202.965C11.6985 218.371 25.3162 230.86 42.1145 230.86Z" fill="#4EF93F"/>
</g>
<g id="outer-circle">
<path id="Vector_47" d="M325.633 103.644C325.153 102.009 324.632 100.357 324.085 98.7357L324.979 98.4822C325.529 100.114 326.054 101.775 326.537 103.421L325.633 103.644ZM32.9193 103.269L32.0164 103.043C32.5062 101.393 33.0372 99.7267 33.5947 98.0908L34.4881 98.3468C33.9338 99.9727 33.4062 101.628 32.9193 103.269V103.269ZM322.344 93.8917C321.731 92.2892 321.08 90.6797 320.407 89.1083L321.278 88.7948C321.955 90.3758 322.611 91.9954 323.227 93.608L322.344 93.8917ZM36.2548 93.4831L35.3724 93.1969C35.9957 91.5822 36.6599 89.9576 37.3467 88.368L38.2168 88.684C37.5341 90.2639 36.874 91.8787 326.292 177.164ZM32.018 176.724C31.5308 175.082 31.0702 173.41 30.6489 171.752L31.5605 171.557C31.9791 173.205 32.4368 174.867 32.9209 176.498L32.018 176.724Z" fill="#6C63FF"/>
</g>
<g id="inner-circle">
<path id="Vector_49" d="M179.221 215.196C178.1 215.196 176.969 215.175 175.858 215.134L175.896 214.277C177.738 214.345 179.621 214.357 181.468 214.31L181.494 174.504 105.393 172.95 104.611 171.395L105.461 171.035C106.234 172.573 107.078 174.108 107.967 175.598L107.146 176.011Z" fill="#6C63FF"/>
<path id="Vector_50" d="M107.406 105.118L106.579 104.717C107.463 103.184 108.418 101.659 109.417 100.185L110.212 100.638C109.225 102.095 108.281 103.603 107.406 105.118ZM250.296 103.868C249.392 102.369 248.417 100.879 247.399 99.438L248.184 98.9711C249.214 100.429 250.2 101.936 251.115 103.453L250.296 103.868ZM113.35 96.3468L112.591 95.8443C113.698 94.4375 114.874 93.0484 116.084 91.7153L116.803 92.2647C115.607 93.5825 114.445 94.9559 113.35 96.3468ZM244.172 95.2023C243.05 93.8321 241.859 92.4791 240.635 91.1812L241.342 9186.973 64.8978L186.885 65.7523Z" fill="#6C63FF"/>
</g>
</svg>
</body>
</html>

CSS

/* GLOBAL STYLING */
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
body{
   text-align: center;
   background-color: whitesmoke;
   margin-top: 10%;
}

/* Animation */
/* inner circle animation */
#inner-circle{
    animation: inner-circle 4s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

@keyframes inner-circle{
    from{
     transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }

} 

/* outer-circle animation */

#outer-circle{
    animation: outer-circle 7s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

@keyframes outer-circle{
    from{
     transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }

} 

#blue{
    animation: blue-circle 3s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

@keyframes blue-circle{
    from{
        transform: translateZ(0deg);
    }
    to{
        transform: rotateZ(-360deg);
    }

}
#pink{
    animation: pink-circle 3s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

@keyframes pink-circle{
    from{
        transform: rotateZ(-360deg);
    }
    to{
        transform: rotateZ(0deg);
    }
}

#green{
    animation: green-circle 2s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

@keyframes green-circle{
    from{
        transform: rotateZ(-360deg);
    }
    to{
        transform: rotateZ(0deg);
    }

Things to do before creating SVG animation:

  • At first download SVG from and group different vectors as one so that you can animate different parts freely. You can use any vector tool but I will recommend using Figma as it is free and easy to use.
  • Select vectors you want to animate together and click ctrl+G to group them as one vector and name accordingly.
svg animations

svg animations
  • And finally after grouping export as SVG and click one ... and select [x] include “id” attribute so that you can get id on vectors grouped in above step and select them while animating (eg: #green in the above SVG animation example).
svg animations

Code explanation(Important points) :

#inner-circle{
    animation: inner-circle 4s infinite linear;
   transform-origin: center ;
   transform-box: fill-box;
}

Why use the transform-origin property?

The transform-origin the property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element.

CSS Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;
svg animations
Source: Css-tricks.com

linear property is used to keep the pace of animation constant throughout the same and infinite property to continue animation infinitely.


What is transform-box property?

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

Values:

  • border-box The border-box is used as the reference box. The reference box of a <table> is the border-box of its table wrapper box, not its table box.
  • view-box

    The nearest SVG viewport is used as the reference box. If a viewBox the attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.

  • fill-box – The object bounding box is used as the reference box.

Thanks for reading my article. Comment down below what you think about this post.

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.

4 Comments

  1. […] Their are built-in methods for creating greensock animation , you just have to specify that methods . Gsap could also be used to create animation through Svg. Check out this complete post on Svg animation . […]

  2. […] Want to learn SVG animation : visit […]

  3. […] Thanks for reading my article.Do share with others if it added value to your life and also check out post on how to create svg animation. […]

  4. […] friends and also check out other articles on-20+ Best React And Angular UI Component Library or How to create better SVG animation? or 20+ Best Programming […]

Comments are closed.