<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1"  preserveAspectRatio="none">

  <defs>

    <linearGradient id="upper" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">

      <stop stop-color="rgb(107,186,112)" offset="0">

        <animate attributeType="CSS" attributeName="stop-color" id="animate0"

           dur="2s" begin="indefinite" fill="freeze"/>

      </stop>

      <stop stop-color="rgb(107,186,112)" offset="1">

        <animate attributeType="CSS" attributeName="stop-color"

           dur="2s" begin="animate0.begin" fill="freeze"/>

      </stop>

    </linearGradient>

  </defs>

  <rect x="0" y="0" width="1" height="1" fill="url(#upper)" opacity="0.6"/>

  <script type="text/javascript">

    var gradientColors = [[255,0,0],[255,255,0]];

    var animateElements = document.getElementsByTagName("animate");

    for (var i=0; i<2; i++) {

      animateElements[i].setAttribute(

        "to",

        "rgb("+gradientColors[i].join(",")+")"

      );

    }

    animateElements[0].beginElement();

  </script>

</svg>