Как анимировать SVG периметр из точек?

Question

[art style]

есть SVG контур из точек, допустим их 8 штук
их координаты

<path d="M348.8,151.1c-1,71,44,103.7-3,131c-66.5,38.6-84.3-7-143-7c-56.8,0-133,48-188-7c-20.9-20.9-2-69.1-2-106
    c0-29.5-23-95-6-130c32.6-67.2,103-4,164-19c52-12.8,153.4-22.2,186,18C377.2,56.3,349.2,118.1,348.8,151.1z"/>

Хочу заставить каждую точку двигаться в рандомном диапазоне от -10px до 10px по отношению к центру
как это сделать?
нашел 2 варианта, или GSAP или ANIMEJS, но они вроде как могут только морфнуть между двумя контурами, т.е. придется рисовать еще как минимум 1 или больше если хочется чтобы анимация была более органичной...

есть еще варианты как осуществить то что я задумал ?

Comments

[Kovalsky]

Хочется что-то типа такого, но 2д, да?

[art style]

Kovalsky, да, но чтобы оно само без тригера на мышку

Answer 1

[Сергей Соколов]

Анимация атрибута d делается с помощью тега animate, где указываются атрибуты from и to – состояния из которого, и куда.

Можно скриптом генерить новые значения атрибута d, но останется ощущение «шагов» в таком движении.

Полагаю, художественный замысел тут несколько иной: чтобы каждая из контрольных точек, определяющих контур, жила своей жизнью, и не по общим часам. Это сделать можно в видеоредакторах, но не в SVG, к сожалению.

Answer 2

[Максим]

https://ru.stackoverflow.com/a/1093659/308951 вот так это делается

Comments

[art style]

Да уже понял что так. только я сделал через anime.js хотя он там и не нужен...
только вот нефига не получается плавности добиться

[Максим]

art style, и на anime.js тоже так же делается