title: How to animate some part of an SVG
body: <p>I have an SVG which looks something like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;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"&gt;
  
  &lt;g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
  fill="#000000" stroke="none"&gt;
  &lt;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"/&gt;
  &lt;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"/&gt;
  &lt;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"/&gt;
  
  &lt;g class="loading"&gt;
  &lt;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"/&gt;
  &lt;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"/&gt;
  &lt;/g&gt;
  
  &lt;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"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Can anybody help me with css animation?. I want to show these arrows as continuously rotating arrows.</p>