Why does svg animation slow down?

Question

css

On my site ( go to site ) there is a simple svg animation in full screen.
It's strange, but for some reason it's pretty bad podlagivaet. I would like to solve this issue, but alas, I can’t get it myself.
Reduced the number of PATH inside the svg, it seems to be less lag, but the overall look of the "slider" has suffered.
Please advise something, or throw a link to the article, thanks!

Answer 1

Animations in svg are not hardware accelerated.
The way out is to rewrite to webgl
In fact, the shader will not be very complicated.
First, we draw the first background in the form of 2 triangles filling the entire viewport.
Then we draw animated triangles, where we use the vertex coordinates in the viewport space as texture coordinates.
So that the animation of the vertices also takes place on the GPU. The vertices of the triangles must be represented as the coordinates of the center of the triangle and a separate offset relative to the center.
Then it will be enough to pass only the current scale of triangles relative to the animation time to the shader.

Answer 2

Everything seems to be working fine. I looked in the fox.
try clearing the cache