How to properly arrange SVG animation?

Question

css

So it goes.
There is an SVG on which a gradient is applied (with the help of <defs /><linearGradient />)
And you need to hang an overflow (glare) on the gradient on this SVG.
Now I see one way: to sit and go through each color in the gradient in the keyframe like a dummy and achieve the desired result. But this, in my opinion, is idiotic.
I'm sure there are easier ways.
Maybe someone knows such ways not to sort through each color, but maybe overlay it on top?
Or maybe just the offset of this gradient will pass for overflow - but how to do this from CSS, if the offset attribute is responsible for this?

Answer 1

Or maybe just the offset of this gradient will pass for overflow - but how to do this from CSS, if the offset attribute is responsible for this?

It will do. You make two identical gradients and animate each like this:

from {
    transform: translateY(-100%);
}
to {
    transform: translateY(100%);
}

Just put a delay on one of them

Answer 2

codepen.io/Geyan/pen/MbyXmq is the first example without svg
https://developer.mozilla.org/en-US/docs/Web/SVG/E... this is with svg (there is a sandbox with an example)