Как создать морфинг svg анимацию привязанную к движению мыши в виде капли?

Question

[deniskins23]

Доброго времени суток.
Кто может подсказать как создать анимацию привязанную к движению мыши в виде капли?
Вот примерно изображение, нужно чтобы когда пользователь водит мышью в области этой секции(не блока) эта фигура(обводка изображения) плавно перетекала как капля и меняла свою форму. Где-то видел даже урок с подобной реализацией, но не сохранил и не могу найти теперь.

Comments

[Rustam Bainazarov]

Вот тут популярные библиотеки для этого:
https://css-tricks.com/many-tools-shape-morphing/

[deniskins23]

Рустам Байназаров, Окей. Спасибо за направление.-)
Просто не мог вспомнить как это правильно назвать..-)а пока вопрос писал и вспомнил.-)
Хорошего дня

Answer 1

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

Морфинг это обычно плавно между фиксированными / отрисованными состояниями.

На картинке в этом вопросе «облако» нарисовано состоящим из правильных окружностей, наложенных друг на друга. Можно сделать генерируемую анимацию на основе случайных чисел, чтобы форма почти никогда не повторялась.

Comments

[deniskins23]

Спасибо за ответ. А можно пример того о чем ты говоришь?

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

deniskins23, набросал пример. Тут только размер и координаты плавают относительно исходных. Интереснее смещать круги относительно общего центра, как бы на рычагах, чуть варьируя радиус и поворот каждого «рычага».

[deniskins23]

Сергей Соколов, Спасибо большое. Пример дельный.

Answer 2

[deniskins23]

Нашел ответ. Примерно такое и нужно было. Как сделать анимацию svg элемента, чтобы произвольно менялась форма «лепёшки»?