Search code examples
csscss-animationssvg-animate

How to animate some part of an SVG

I have an SVG which looks something like this

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>

<g class="loading">
<path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
-385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
-176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
-94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
-469 158 -703 138z"/>
<path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
-118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
-197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
-133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
</g>

<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</g>
</svg>




</body>
</html>

I'm sorry for the previous post not being clear. the arrows are at the bottom of the icon. When I tried to rotate the arrows it rotates erratically and goes all over the screen.

Can anybody help me with css animation?. I want to show these arrows as continuously rotating arrows.

Solution
    1. Enclose the paths you want to apply the CSS animation to in <g> tag.
    2. Find the axis on which the component must rotate. In the above case paths are enclosed inside a square so center is at 50% from top and 50% from left. use transform-origin: 50% 50% to set point about which the component has to rotate.

    .running {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: spin 3s linear infinite;
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
        }
    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M405 5109 c-194 -28 -367 -205 -395 -404 -13 -92 -13 -1000 0 -1090
12 -78 47 -162 91 -217 l29 -37 -33 -44 c-45 -59 -75 -133 -87 -214 -13 -89
-13 -997 0 -1086 12 -81 42 -155 87 -214 l33 -43 -33 -43 c-45 -59 -75 -133
-87 -214 -13 -88 -13 -997 0 -1088 29 -204 201 -376 405 -405 42 -6 427 -10
948 -10 l877 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 32 19 53 20
941 20 l907 0 0 160 0 160 -907 0 c-888 0 -909 1 -941 20 -18 11 -41 34 -52
52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20 55 20
1848 20 1793 0 1815 0 1848 -20 59 -36 72 -71 72 -192 l0 -108 160 0 160 0 0
78 c-1 163 -33 279 -101 364 l-29 37 33 44 c45 59 75 133 87 214 13 88 13 997
0 1088 -29 204 -201 376 -405 405 -88 12 -3574 11 -3660 -1z m3683 -329 c18
-11 41 -34 52 -52 19 -32 20 -52 20 -568 0 -516 -1 -536 -20 -568 -11 -18 -34
-41 -52 -52 -33 -20 -55 -20 -1848 -20 -1793 0 -1815 0 -1848 20 -18 11 -41
34 -52 52 -19 32 -20 52 -20 568 0 516 1 536 20 568 11 18 34 41 52 52 33 20
55 20 1848 20 1793 0 1815 0 1848 -20z"/>
<path d="M760 4308 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
<path d="M760 2708 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
    <g class="running">
        <path d="M3728 2550 c-549 -49 -1007 -450 -1133 -992 -24 -103 -34 -266 -24
        -385 20 -258 119 -499 287 -705 l75 -90 110 110 110 110 -51 61 c-102 123
        -176 276 -208 430 -22 114 -15 343 15 446 94 327 348 583 672 675 115 33 449
        41 449 10 0 -4 -34 -52 -76 -105 -70 -90 -74 -98 -57 -110 10 -7 65 -49 123
        -94 58 -44 108 -77 112 -73 4 4 96 124 206 267 l199 259 -106 48 c-254 116
        -469 158 -703 138z"/>
        <path d="M4636 2071 l-109 -109 52 -62 c102 -123 175 -275 206 -428 23 -114
        17 -334 -13 -445 -41 -151 -153 -339 -263 -443 -111 -105 -275 -198 -416 -236
        -118 -31 -443 -38 -443 -9 0 4 34 51 75 104 l75 97 -48 37 c-94 74 -192 148
        -197 148 -3 0 -97 -119 -209 -265 l-203 -265 120 -53 c233 -103 363 -133 577
        -133 149 0 262 16 385 56 452 148 788 531 871 995 20 113 20 330 -1 445 -35
        194 -117 381 -241 545 -113 150 -92 148 -218 21z"/>
    </g>
<path d="M760 1108 c-112 -31 -149 -170 -68 -255 105 -110 296 -3 256 145 -12
44 -60 98 -97 107 -14 3 -33 8 -41 9 -8 2 -31 0 -50 -6z"/>
</svg>
</body>
</html>

    Note: transform box doesn't work on Edge or IE see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box for more information.