Is it possible to animate an SVG gradient set using css background property?
I've tried using the SVG animate element, here's an example:
<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect x="0" y="0" width="50" height="100" style="fill: black;"/>
</pattern>
<linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
<stop offset="0" style="stop-color: #4a87db;"/>
<stop offset="1" style="stop-color: rgb(255, 255, 255);"/>
<animate attributeName="x1" dur="5000ms" repeatCount="indefinite"
from="0%" to="100%" />
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>But the animation isn't smooth and I'd like to just change the blue color from one hex to another rather than animating the x1 attribute.
is it possible to animate an SVG gradient set using css background property?
To do this, add the SVG code with animation inside to CSS
background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;'...
To get this form of recording, you need to encode svg using SVG-encoder
Gradient color animation
To change the color of the gradient, you can use the animation of the stop offset attribute
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient-3" x1="100%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="0" style="stop-color: #4a87db;">
<animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
</stop>
<stop offset="1" style="stop-color: #A6BCDB;">
<animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>Add this encoded svg file to background-image
div {
width: 800px;
height: 500px;
background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;' viewBox='0.148 0.121 399.909 187.745' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient-3' x1='100%25' y1='0%25' x2='100%25' y2='100%25' spreadMethod='pad'%3E%3Cstop offset='0' style='stop-color: %234a87db;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3Cstop offset='1' style='stop-color: %23A6BCDB;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='svgg'%3E%3Cpath id='path1' d='M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0' stroke='none' fill-rule='evenodd' style='fill: url(%23gradient-3);'/%3E%3C/g%3E%3C/svg%3E%0A") ;
background-repeat: no-repeat;
}<div></div>