<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<defs>
 <clipPath id="waveMask">
  <rect width="600" height="600" />
  </clipPath>
 <clipPath id="refWaveMask">
  <rect width="600" height="1600" />
  </clipPath>
 <path id="waveTop"  d="M0,355c150,0,150,46,300,46
	c150,0,150-46,300-46c150,0,150,46,300,46s150-46,300-46"/>
</defs>
<g id="refBacon" clip-path="url(#refWaveMask)" fill="none"  stroke-width="51" >
 <use xlink:href="#waveTop" y="20" stroke="#111" stroke-width="281" opacity="0.04"/>
</g>
<g id="whole" clip-path="url(#waveMask)" fill="none"  stroke-width="51" transform="translate(0, -60) ">

<use xlink:href="#waveTop" y="-100" stroke="#E39170" stroke-width="41"/>
<use xlink:href="#waveTop" y="20" stroke="#B7000B" stroke-width="241" />
<use xlink:href="#waveTop" y="-0" stroke="#F1BD99"/>
<use xlink:href="#waveTop" y="90" stroke="#F1BD99" stroke-width="21"/>
 </g>
</svg>

body {
 background-color: #69C8EF;
 overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 60%;
 height: 60%;
overflow:visible;
 visibility: hidden;
 
}

class App { 
 
  constructor(){   
 
   const waveTl = new TimelineMax({repeat:-1}).timeScale(2);
   TweenMax.staggerTo(['#whole', '#refBacon'], 0, {
    skewX:23,
    rotation:-23,
    cycle:{
     x:[0, 0],
     y:[0, 250],
     scale:[1, 0.96]
    }
   },0)
   
   waveTl.to('#waveTop', 2, {
     x:-600,
     repeat:-1,
     ease:Linear.easeNone
   })
  }
 

}


TweenMax.set('svg', {
  visibility: 'visible'
})

var app = new App();