SVG animated gradient color -
i have following svg code:
<svg height="130" width="500"> <defs> <lineargradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#054f16"> <animate attributename="stop-color" values="#054f16; #91bc9c" dur="4s" repeatcount="indefinite"></animate> </stop> <stop offset="100%" stop-color="#01ff89"> <animate attributename="stop-color" values="#91bc9c; #054f16" dur="4s" repeatcount="indefinite"></animate> </stop> </lineargradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" /> <text fill="#ffffff" font-size="45" font-family="verdana" x="50" y="86">svg</text> sorry, browser not support inline svg. </svg>
i looking animate gradient keep smoothly flowing in svg container, behind text. can see this fiddle, jumpy. how fix this? thanks!
to animation cycle around/back starting point, add value each values
attribute. value should starting colour.
<svg height="130" width="500"> <defs> <lineargradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#054f16"> <animate attributename="stop-color" values="#054f16; #91bc9c; #054f16" dur="4s" repeatcount="indefinite"></animate> </stop> <stop offset="100%" stop-color="#01ff89"> <animate attributename="stop-color" values="#91bc9c; #054f16; #91bc9c" dur="4s" repeatcount="indefinite"></animate> </stop> </lineargradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" /> <text fill="#ffffff" font-size="45" font-family="verdana" x="50" y="86">svg</text> sorry, browser not support inline svg. </svg>
Comments
Post a Comment