I've created a StackBlitz to demonstrate what I'm going to describe: https://stackblitz.com/edit/sveltejs-kit-template-default-eagnjw?file=src/routes/index.svelte
So I have a fancy animating SVG grid type thing with waves in it. I essentially have a bunch of vertical and horizontal waves and I intersect them using clip paths and I then clip each image a few times. You can see how I'm doing it more specifically in the stackblitz. My current implementation is horrifyingly inefficient and also slow and stuttery on mobile, i.e. performance is in the negatives lol. I'm wondering: how on earth would I be able to improve performance?
A few potential solutions I'm thinking of are: somehow merging the clip paths of each picture and only having one image; maybe somehow mathing out the combined clip paths might be viable without having nested clipping; perhaps using masks instead of clip paths, however I'd loose pointer events functionality so I'd have to manually implement it which would probably be counter-productive; attempting to maybe perhaps switch to something non-svg like a canvas w/ javascript or maybe webgl, but then I'd have the same issue with the masks I think. It's entirely possible there's an approach I'm completely missing.
Any input would be greatly appreciated! Thank you.