How to reduce the CPU usage of this animation


I found this animation use lots of CPU usage:

and even cause the safari will reload the page, anyway to reduce the CPU usage please?


reduce blurrings …

Hi @h_classen,

How is going?

Do you mean the background blurrings? Or the values in JavaScript?


This brilliant hype animation simply pushes the possibilities of what is doable to its limits.
one of the most ‘expensive’ filter for animating is the blur filter …

If you go to each element and hit “Reset Filters to Default” it reduces the CPU usage from ~130% to ~80% on my machine.

I also tried changing the shape morph algorithm to Direct Anchor Point Match but that didn’t seem to matter much. You might be able to gain a few percent by not using flexible layout.

Ultimately a lot of animations are running, especially those with shape morphs that have to manipulate SVG.