Как можно управлять svg patch параметрами через canvas?

Question

[Brendan Castaneda]

Я бы хотел упрвлять через canvas параметрами patch одного svg файла.
Но я не имею представления возможно это или нет.
У меня есть svg файл и там содержится 3 пути patch.

В целом я хочу что-бы эти пути "фигуры" отскакивали от краёв рандомно перемещаясь.
Я сделал подобную реализация в canvas, но там я могу управлять только отдельными svg файлами, перемещая их.
Я не могу разъединить их на несколько svg файлов, так как все patch являются одним градиентом который разъединяется на цвета и в последствии как жидкость сливается друг с другом.

Вот пример того, как это должно работать я сделал codepen
Но как я и говорил из за того, что это все разные svg я не могу сделать плавное перетикание градиента как
в данном примере codepen

Comments

[ambisinister One]

Джош Мариначи. Погружение в canvas почитайте)

[Brendan Castaneda]

ambisinister One, А это поможет решить мою проблему?)
Или может вы знаете, что тут можно сделать?

[ambisinister One]

Brendan Castaneda, Я сторонник чистого css.
Всё то-же можно и без скриптов исполнить.
Даже Ваш образец работает без явы.
Простая трансформация.

[Brendan Castaneda]

ambisinister One, Мне скрипты нужны только для того, что-бы заставить их двигатся в рандомномных направлениях и отталкиваться от стенок бокса.

[ambisinister One]

Brendan Castaneda, Я бы на Вашем месте здесь сначала почитал.

Answer 1

[Brendan Castaneda]

Одно из решений с использованием GSAP3 - GreenSock
CodePen

Нужно будет допилить до нормального состояния конечно ))