How can svg patch parameters be controlled via canvas?

Question

Canvas

I'd like to control the patch settings of a single svg file via canvas.
But I have no idea if this is possible or not.
I have an svg file and it contains 3 patch paths.

In general, I want these "shape" paths to bounce off the edges, moving randomly.
I made a similar implementation in canvas, but there I can only manipulate individual svg files by moving them around.
I can't split them into multiple svg files since all patches are one gradient that splits into colors and subsequently merges into each other like a fluid.

Here is an example of how it should work, I made a codepen
But as I said, due to the fact that these are all different svgs, I cannot make a smooth gradient tick like
in this examplecode pen

Answer 1

One of the solutions using GSAP3 - GreenSock
CodePen
It will be necessary to finish it to the normal state of course))