<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop id="stop1" offset="0" stop-color="white" stop-opacity="0" />
      <stop id="stop2" offset="0.3" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="500" height="200" fill="url(#Gradient)"  />
    </mask>
  </defs>

  <rect x="0" y="0" width="500" height="200" fill="#480048" />
  <rect x="0" y="0" width="500" height="200" fill="#C04848" mask="url(#Mask)" />
</svg>

html, body {
  background: #000;
}

svg {
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -250px;
}

TweenMax.fromTo("#stop1", 1.5, {
  attr:{offset:-1}
}, {
  attr:{offset:1},
  repeat: -1,
  yoyo: true,
  ease:Linear.easeNone});

TweenMax.fromTo("#stop2", 1.5, {
  attr:{offset:0}
}, {
  attr:{offset:2},
  repeat: -1,
  yoyo: true,
  ease:Linear.easeNone});