Как сделать изображение с такой же анимацией как по ссылке?

Как сделать изображение с такой же анимацией как в коде? Именно картинке а не флагу, каким образом это можно сделать?

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" id="svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 300 300" aria-labelledby="title desc">
  <!-- Title -->  
  <title id="title">Flag of Belgium</title>
  <!-- Description -->  
  <desc>Belgian flag animation withs SVG and JavaScript</desc>
  
  <defs>
    <style> /* Style your SVG here */
      <![CDATA[
        @import url("https://fonts.googleapis.com/css?family=Open+Sans"); /* Link your Google font here */
        text{ /* Text global style here */
          font-family: "Open Sans", sans-serif; /* Declare google font and fall-back font style here */
          text-transform: uppercase; /* Text upper/lower case */
          font-weight: 700; /* Text weight */
          font-size: 35px; /* Text size */
          fill: #1d1f20; /* Text color */
        }
        #bg{ /* Background color */
          fill: #fff;
        }
        .flagColor1{ 
          fill: #000000; /* Flag color 1 here  */
        }
        .flagColor2{ 
          fill: #FAE042; /* Flag color 2 here  */
        }
        .flagColor3{ 
          fill: #ED2939; /* Flag color 2 here  */
        }
        #svg{
          width: 100%; /* Make SVG responsive for Internet Explorer */
          padding-bottom: 100%; /* SVG bottom hack for Internet Explorer */
          height: 1px; /* SVG bottom hack for Internet Explorer */
          overflow: visible; /* For Mozilla Firefox if using SVG bottom hack for Internet Explorer */
          visibility: hidden; /* To avoid CPU overload. Make SVG visible again with JavaScript onload */
        }  
      ]]>
    </style>
 </defs>
  
 <!-- Link to GreenSock TweenMax -->
 <script type="text/javascript" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
 <!-- JavaScript -->
 <script type="text/javascript">
   <![CDATA[
        // Intialize composition at page load
        document.addEventListener("DOMContentLoaded", function(event) {
        window.onload = function() {
          
          // Declare variables
          var svg, flagTop, flagVmid, flagBot, tl;
          
          // Set object references
          svg = document.getElementById("svg");
          flagTop = document.getElementById("flagTop");
          flagVmid = document.getElementById("flagVmid");
          flagBot = document.getElementById("flagBot");
          
          // Set animation preferences
          
          // Set SVG visibility to visible
          TweenMax.set(svg, {
            visibility: "visible"
          });
          
          // Create timeline
          tl = new TimelineMax({
            repeat: -1
          });
          tl.timeScale(1); // Adjust animation speed
          
          tl.to([flagTop, flagVmid, flagBot], 6, {
            x: 900,
            rotation: 0.01,
            z:0.01,
            ease: Linear.easeNone
          });

        };
      });
        ]]>
  </script> 

  <!-- SVG overflow wrapper -->
  <svg viewBox="0 0 300 300">
    
    <!-- Background -->
    <path id="bg" d="M0 0h300v300H0z"/>
    
    <!-- Flag -->
    <svg id="flag" width="80" height="300" x="30" y="0">
       <path id="flagTop" d="M-900 30c50 0 100 40 150 40s100-40 150-40 100 40 150 40 100-40 150-40 100 40 150 40S-50 30 0 30s100 40 150 40 100-40 150-40v160c-50 0-100 40-150 40S50 190 0 190s-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40z" class="flagColor1"/>
    </svg>
      
    <svg id="flag2" width="80" height="300" x="110" y="0">
      <path id="flagVmid" d="M-980 30c50 0 100 40 150 40s100-40 150-40 100 40 150 40 100-40 150-40 100 40 150 40 100-40 150-40 100 40 150 40 100-40 150-40v160c-50 0-100 40-150 40s-100-40-150-40-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40z" class="flagColor2"/>
    </svg>
    
    <svg id="flag3" width="80" height="300" x="190" y="0">
      <path id="flagBot" d="M-1060 30c50 0 100 40 150 40s100-40 150-40 100 40 150 40 100-40 150-40 100 40 150 40 100-40 150-40 100 40 150 40 100-40 150-40v160c-50 0-100 40-150 40s-100-40-150-40-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40-100 40-150 40-100-40-150-40z" class="flagColor3"/>
    </svg>

    <!-- Text -->
    <text>
      <tspan x="150" y="275" text-anchor="middle">
        BELGIUM
      </tspan>
    </text>
 
  </svg>
</svg>
  
</div>



body{
  background-color:#fff;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container{
  max-width:300px;
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

ссылка на svg https://www.dropbox.com/s/kzga7b5aum2x4ta/freelancers.svg?dl=0