I am trying to create a simple SVG linear gradient animation.
something like that but in a loop, not going back and forth at the end. https://codepen.io/kentaro_au/pen/KKZxeVE
Just 2 colors that would make the animation from one side to the other.
I have tried a little bit with an attribute called: stop-color, without luck.
Is anyone familiar with these so he/she could help me?
Also is there any change that the angle of the gradient would change according to the mouse move?
That would be really awesome.
I haven’t really had time to play with this but with a quick trial and error I produced this effect.
It seems to be you need to repeat the gradient again so that when its at 100% then it looks the same as when its at zero so when you start the animation again you don’t see a difference.
Unfortunately time is tight today and I am away for a while.
It’s a little bit different, because I am trying to make it work as background in an SVG image.
As I have understand I have to insert code inside the SVG, it has to do with the “stop-color” something like that.
If you have a gradient starting with red and then fading to blue which you animate with the background position then you will have a blue color going straight to red when the animation restarts. It does not fade in nicely.
What you need is for the red to fade to blue and then fade back to red and then blue again in the gradient . This means when you have animated the element the last frame is the same as the start frame and so you get a continuous motion effect.
You are oversizing the background so that you an animate the background position and you need to ensure that the final frame looks like the start frame.
There probably is an easier way of doing this but my internet has been down for a week now so only have mobile access.
