SVG horizontal gradient animation - animation

Question

I've created the fiddle
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
<stop offset="0" style="stop-color:#4D75B1" />
<stop offset="0.1138" style="stop-color:#4C7BB0" />
<stop offset="0.2617" style="stop-color:#4A8BAD" />
<stop offset="0.4278" style="stop-color:#46A6A7" />
<stop offset="0.5117" style="stop-color:#44B6A4" />
<stop offset="0.9093" style="stop-color:#828282" />
<animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
<stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="x2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
the animation is moving vertically but i want it be moved horizontally.
I am not able to do this . someone please help me out
My confusion is the gradient is like vertical. how can i set the stop tag with the offset for the different colors and animation.
and also in animate tag. if i use freeze instead of repeatcount attribute that will take full single color but i want it to filled with the gradient i.e how it animates.
Better if the animation come like the waves from the bottom to top.(liquid filling effect)
JSfiddle
Added the svg code for the final image i needed after the animation
<?xml version="1.0" encoding="utf-8"?>
js fiddle updated
the animation movement to be from bottom to top and gradient color should be from left to right .and also i need that to be animated like the water waves

Answer 1

You mean like this? I've just used y2 instead of x2
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="0" y2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="y2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>