Hello,
I placed this under the custom code section as I assume custom coding is required. What I’m interested in doing is filling a vector with an animated gradient. Thanks to ChatGPT I have gotten some code that does it to some degree, but it uses the stop function to make the gradient:
"
</linearGradient>
Any way this animates the gradient looks very bad, as it simply compresses the gradient along one axis and repeats that.
The kind of animation I’m looking for is more along the lines of being zoomed into the gradient, and then scanning accross it. For instance like this:
.headergradientcolor {
background: linear-gradient(-45deg, #23d5ab90, #e73c7e90, #03f8fc90,#ee775290 );
background-size: 400% 400%;
animation: gradientan 20s ease infinite;
}
@keyframes gradientan {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Is it possible to fill a vector path with this sort of normal CSS animation, or do I have to use the style that ChatGPT spit out? If I have to use that, how would I achieve a similar animation as the headergradient one above?
Thank you.