I have a SVG logo and it needs to be animated indefintely with a progressive fill from left to right, and then in reverse order from right to left
I've tried to use this but with no success
<linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#808080">
<animate attributeName="stop-color" values="#808080; #FFFFFF" dur="1s" fill="freeze" repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#FFFFFF">
<animate attributeName="stop-color" values="#FFFFFF; #808080" dur="1s" fill="freeze" begin="1s" repeatCount="indefinite" />
</stop>
</linearGradient>
<symbol viewBox="0 0 320 320" id="logo" fill="url(#lightGradient)">
Any suggestion ?
Regards
Like this? It animates from left to right and back again as per your requirement.
<svg>
<defs>
<linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#808080">
<animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0%" stop-color="#FFFFFF">
<animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#lightGradient)"/>
</svg>