How do I apply animation like circle (codepen) to svg? What would happen like on gif is it possible?

N

NagelStart2020-05-31 13:37:46

SVG

NagelStart, 2020-05-31 13:37:46

I'm not very good at this. I can not google, that is, find a solution. Tell me how can I apply animation like on a ball (codepen) to svg? What would happen like on gif.
Here is a gif - https://drive.google.com/file/d/12u-mylfIDQl_AOqko...
And here is the animation that needs to be applied to svg -
snippet

Well, actually the svg itself -

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="200px"
viewBox="0 0 11.63 12.45">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil1 {fill:#336699}
    .fil2 {fill:#5283B5}
    .fil0 {fill:white}
   ]]>
  </style>
   <mask id="mask">
     <rect height="100%" fill="blue">
       <animate attributeName="width" 
                dur="3s"
                repeatCount="indefinite"
                begin="0s"
                values="0%;20%; 30%; 40%; 50%; 60%; 70%; 80%; 90%; 100%;
                        90%; 80%; 70%; 60%; 50%; 40%; 30%; 20%; 10%" />
         <animate attributeName="fill" 
                dur="3s"
                repeatCount="indefinite"
                begin="10s"
                values="blue; red; red; blue; blue; blue; #fff;"/>
     </rect>
     <rect width="10%" height="100%" fill="#fff000">
         <animate attributeName="x" 
                dur="3s"
                repeatCount="indefinite"
                begin="0s"
                values="
                  10%; 10%; 20%; 30%; 40%; 50%; 60%; 70%; 80%; 90%;
                  100%; 90%; 80%; 70%; 60%; 50%; 40%; 30%; 20%; 10%"/>
     </rect>
   </mask>
 </defs>
  <g mask="url(#mask)">
  <path class="fil0" d="M11.63 2c0,0.47 0,0.94 0,1.4 0,0.47 0,0.93 0,1.4 0,0.68 -0.12,1.35 -0.42,1.95 -0.29,0.58 -0.72,1.05 -1.27,1.41 -0.61,0.41 -1.22,0.82 -1.84,1.23 -0.61,0.41 -1.22,0.82 -1.83,1.23l-0.13 0.09 0 1.71 -0.23 0.02c-0.46,0.04 -0.97,-0.23 -1.34,-0.46 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.63,-0.39 -1.16,-0.9 -1.52,-1.55 -0.36,-0.67 -0.51,-1.41 -0.51,-2.16l0 -0.45 0.39 0.24c0.42,0.26 0.85,0.52 1.27,0.78l0.12 0.07 0 0.14c0,0.42 0.16,0.73 0.51,0.95 0.42,0.26 0.85,0.52 1.27,0.78 0.42,0.26 0.85,0.52 1.27,0.78 0.04,0.02 0.16,0.09 0.21,0.09 0.03,-0.06 0.04,-0.21 0.04,-0.26 0,-0.42 -0.16,-0.73 -0.51,-0.95 -0.32,-0.19 -0.64,-0.39 -0.95,-0.58 -0.32,-0.19 -0.64,-0.39 -0.95,-0.58l-0.12 -0.07 0 -0.14c0,-0.52 0,-1.04 0,-1.55l0 -0.45 0.38 0.24c0.32,0.19 0.64,0.39 0.95,0.58 0.32,0.19 0.64,0.39 0.95,0.58 0.04,0.02 0.16,0.09 0.21,0.09 0.03,-0.06 0.04,-0.21 0.04,-0.26 0,-0.42 -0.16,-0.73 -0.51,-0.95 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.04,-0.02 -0.16,-0.09 -0.21,-0.09 -0.03,0.06 -0.04,0.21 -0.04,0.26l0 0.45 -0.38 -0.24c-0.42,-0.26 -0.85,-0.52 -1.27,-0.78l-0.12 -0.07 0 -0.14c0,-0.55 0.07,-1.35 0.6,-1.67 0.75,-0.35 1.78,-0.57 2.63,-0.3l0.02 0.01 1.75 1.07 2.88 -1.91 0.78 -0.52c1.17,-0.54 2.25,-0.27 2.71,0.46 0.22,0.34 0.25,0.85 0.25,1.25zm-4.2 5.85c0.31,-0.21 0.61,-0.41 0.92,-0.62 0.44,-0.29 0.87,-0.59 1.31,-0.88 0.3,-0.2 0.41,-0.49 0.41,-0.84 0,-0.47 0,-0.93 0,-1.4 0,-0.47 0,-0.94 0,-1.4 0,-0.04 -0,-0.14 -0.02,-0.2 -0.04,0.02 -0.09,0.05 -0.11,0.06 -0.44,0.29 -0.87,0.59 -1.31,0.88 -0.4,0.27 -0.8,0.54 -1.2,0.8 0,0.66 0,1.31 0,1.97 0,0.54 0,1.09 0,1.63z"/>
  <path class="fil1" d="M7.18 8.32c0.44,-0.29 0.87,-0.59 1.31,-0.88 0.44,-0.29 0.87,-0.59 1.31,-0.88 0.35,-0.23 0.52,-0.59 0.52,-1.05 0,-0.47 0,-0.94 0,-1.4 0,-0.47 0,-0.94 0,-1.4 0,-0.47 -0.18,-0.58 -0.52,-0.35 -0.44,0.29 -0.87,0.59 -1.31,0.88 -0.44,0.29 -0.87,0.59 -1.31,0.88 0,0.7 0,1.4 0,2.1 0,0.7 0,1.4 0,2.1zm4.2 -3.51c0,0.7 -0.13,1.32 -0.39,1.84 -0.26,0.53 -0.66,0.96 -1.18,1.32 -0.61,0.41 -1.22,0.82 -1.84,1.23 -0.61,0.41 -1.22,0.82 -1.83,1.23 0,-1.17 0,-2.34 0,-3.5 0,-1.17 0,-2.34 0,-3.51 0.61,-0.41 1.22,-0.82 1.83,-1.23 0.61,-0.41 1.22,-0.82 1.84,-1.23 0.52,-0.35 0.92,-0.44 1.18,-0.26 0.26,0.17 0.39,0.61 0.39,1.31 0,0.47 0,0.94 0,1.4 0,0.47 0,0.94 0,1.4z"/>
  <path class="fil2" d="M5.89 4.8c-0.15,-0.15 -0.5,-0.57 -0.88,-0.77 -1.28,-0.79 -1.86,-1.14 -3.14,-1.9 -0.13,-0.09 -0.59,-0.21 -0.76,-0.16 0.82,-0.19 1.27,-0.37 2.03,-0.09l2.75 1.69 0 1.23z"/>
  <path class="fil2" d="M6 3.32c1.48,-1.01 2.38,-1.59 3.69,-2.45 0.76,-0.5 1.17,-0.42 1.38,-0.27 -0.38,-0.36 -1.35,-0.6 -2.23,-0.13l-3.56 2.36 0.72 0.48z"/>
  <path class="fil1" d="M5.89 12.19c-0.3,0.02 -0.7,-0.12 -1.19,-0.42 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.64,-0.39 -1.11,-0.88 -1.43,-1.46 -0.32,-0.58 -0.47,-1.26 -0.47,-2.04 0.42,0.26 0.85,0.52 1.27,0.78 0,0.52 0.21,0.91 0.64,1.17 0.42,0.26 0.85,0.52 1.27,0.78 0.42,0.26 0.85,0.52 1.27,0.78 0.42,0.26 0.63,0.13 0.63,-0.39 0,-0.52 -0.21,-0.91 -0.63,-1.17 -0.32,-0.2 -0.64,-0.39 -0.95,-0.58 -0.32,-0.19 -0.64,-0.39 -0.95,-0.58 0,-0.52 0,-1.04 0,-1.55 0.32,0.19 0.63,0.39 0.95,0.58 0.32,0.19 0.63,0.39 0.95,0.58 0.42,0.26 0.63,0.13 0.63,-0.39 0,-0.52 -0.21,-0.91 -0.63,-1.17 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 -0.42,-0.26 -0.64,-0.13 -0.64,0.39 -0.42,-0.26 -0.85,-0.52 -1.27,-0.78 0,-0.78 0.16,-1.26 0.47,-1.46 0.32,-0.19 0.79,-0.1 1.43,0.29 0.47,0.29 0.93,0.57 1.4,0.86 0.47,0.29 0.93,0.57 1.4,0.86 0.37,0.23 0.68,0.51 0.93,0.84l0 7.18z"/>
 </g>
</svg>