@arttstyle
web-макака

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

есть 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 или больше если хочется чтобы анимация была более органичной...

есть еще варианты как осуществить то что я задумал ?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
Анимация атрибута d делается с помощью тега animate, где указываются атрибуты from и to – состояния из которого, и куда.

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

Полагаю, художественный замысел тут несколько иной: чтобы каждая из контрольных точек, определяющих контур, жила своей жизнью, и не по общим часам. Это сделать можно в видеоредакторах, но не в SVG, к сожалению.
Ответ написан
LenovoId
@LenovoId
грёбнный короновирус
https://ru.stackoverflow.com/a/1093659/308951 вот так это делается
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы