Lagg gooey with bigger svg on Safari about gooey-react

[luukdv]

right now, i only apply weak intensity

You don't have to lower the intensity for performance reasons. It doesn't make it less resource-intensive, it just makes the gooey effect much less obvious (see https://gooey-react.netlify.app/properties/intensity/).

instead of applying the gooey effect to 4 circles, i should just applied to 2-3 small circles right ?

For example! If I disable the <Goo> filter in your large example, I don't see that much of a difference. So you could think about which part you want to apply the effect to, and only focus on that smaller area.

can u explain more about what you think that might fix this issue ?

I don't think there's a fix available for how Safari handles this... Like you pointed out, as soon as it has to work with a larger area (one single big surface or multiple smaller ones) it seems to start choking. See https://codepen.io/mnmxmx/full/VjjvEq in Safari for example, which even utilizes a canvas implementation. In Chrome on the other hand, even if there's a lot of elements on the screen (like in your second example) there's no drop whatsoever.

If you do find a way for improved Safari performance, I'd love to hear about it!

[luukdv]

Some browsers (like Safari) don't handle these filters very well unfortunately. 🙁 Besides that, they are pretty resource-intensive either way. I don't think there's a fix available for this issue, but looking at your example, the effect would be very similar without the Goo filter because the circles are so close together.

Is this the final graphic you want to achieve, or something else? You could try to only apply it to a smaller part where the gooey effect has to be most apparent.

[dellwatson]

ic, thanks for the reply, i would like to help if i could, so can u explain more about what you think that might fix this issue ?

and for your suggestion, instead of applying the gooey effect to 4 circles, i should just applied to 2-3 small circles right ?
hmmph i will try it later.

right now, i only apply weak intensity

as u said, it's because of the filters, not because of the bigger svg causing this.
if i have multiple gooey on a single page, it also causing lagg on safari.

https://dw-test-gatsby.netlify.app/gooey-small-single/ normal
https://dw-test-gatsby.netlify.app/gooey-small-many/