<div class="container">
<svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
  <mask id="mask">
    <path id="tube" fill="#FFFFFF" d="M484.5,315.5h-369c-8.5,0-15.5-7-15.5-15.5v0c0-8.5,7-15.5,15.5-15.5h369
c8.5,0,15.5,7,15.5,15.5v0C500,308.5,493,315.5,484.5,315.5z" />
  </mask>
  <pattern id="pattern" width="400" height="62.4" x="0" y="0" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" fill="url(#grad)" width="400" height="62.4" />
  </pattern>

  <filter id="drop" x="-150%" y="-150%" width="280%" height="280%">
    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="4" />
    <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.7" intercept="0" />
    </feComponentTransfer>
    <feComposite in="SourceGraphic" operator="over" />
  </filter>
</defs>
<g>
  <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="000" y1="300" x2="400" y2="300">
    <stop  offset="0" style="stop-color:#FFEB3B"/>
    <stop  offset="0.2" style="stop-color:#FFEB3B"/>
    <stop  offset="0.2" style="stop-color:#FF5722"/>
    <stop  offset="0.4" style="stop-color:#FF5722"/>
    <stop  offset="0.4" style="stop-color:#E91E63"/>
    <stop  offset="0.6" style="stop-color:#E91E63"/>
    <stop  offset="0.6" style="stop-color:#03A9F4"/>
    <stop  offset="0.8" style="stop-color:#03A9F4"/>
    <stop  offset="0.8" style="stop-color:#8CC63F"/>
    <stop  offset="1" style="stop-color:#8CC63F"/>
  </linearGradient>
</g>
<g filter="url(#drop)">
  <g mask="url(#mask)">
    <rect id="grad" x="100" y="268.8" fill="url(#pattern)" width="400" height="62.4"/>
  </g>
</g>
<line id="shine" opacity="0.4" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="345,7,3" x1="124" y1="293" x2="479" y2="293"/>
</svg>

</div>

body {
  background-color:#e7f0f7;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
 
}

//Copy of Chris Gannon's pen:
//https://codepen.io/chrisgannon/pen/NGZJWq?editors=011
//
//He has a video here too: https://www.youtube.com/watch?v=_mht2KqcZw8
//
var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container')

TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})
TweenMax.set('svg', {
  visibility:'visible'
})


var tl = new TimelineMax({repeat:-1});
tl.to('#pattern', 4, {
  attr:{
    x:400
  },
  ease:Linear.easeNone
})