Как сделать такую анимацию SVG из фигмы?

Question

[Альберт Макс]

Есть проект по вёрстке, дизайн в фигме. И в одной секции находится svg анимация: вот ссылка. В определенный момент передвижения мышки - кнопка закрашивается и на форме появляется тень.

Так вот, как можно реализовать эту анимацию из фигмы в вёрстке ?

Comments

[Вадим]

Для начала разбить на шаги и определить их более конкретно.
1) Не в "определённый момент" а по наведению на кнопку, так? За реакцию наведения отвечают стили с псевдоклассом :hover
2) Дочерний элемент не может влиять на родительский. Поэтому задать тень родителю(форме) при наведении на ребёнка нельзя. Но в современном CSS можно указать родителю, что если он имеет ребёнка с ховером, то добавить ему правила отображения. Делается это через псевдокласc :has, но тут нужно обратить внимание на браузерную поддержку.

Альтернативный вариант - если у формы будет posiiton: relative, а у кнопки будет абсолютно спозиционированный псевдоэлемент размером на всю форму и при наведении на кнопку псевдоэлемент будет отрисовывать тень.

[Альберт Макс]

Вадим, Вы не совсем поняли. Не при наведении, а при перемещении svg курсора. Как на гифке.

[Вадим]

Альберт Макс, что такое svg курсор? Гифка это же то, как это должно выглядеть, так? То есть это схематично форма, на которой кнопка, так? При наведении на кнопку кнопка закрашивается а у формы добавляется тень. Или не так?

[Ankhena]

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

[Вадим]

Ankhena, Да, тоже обратил внимание, но списал это на "подачу" идеи.
Альберт Макс Возможно, там не по ховеру, а по фокусу на кнопку.

Но это ничего не меняет в алгоритме из первого комментария.

[Ankhena]

Вадим, да, подача затейливая.
Зачем пользователю тень у формы при наведении/нажатии/фокусе на кнопку тоже загадка.

[Альберт Макс]

Ankhena, Это Вадим, Это всё svg анимация. Пользователь ничего не делает. Это бесконечная анимация и необходимо реализовать перемещение path элементов внутри svg.

[Вадим]

Альберт Макс, Тогда в чём вопрос - не понятно.
Умеете в код - используйте что душе угодно, чтобы реализовать эту анимацию. Как делать свг анимации полно в интернете информации. Хоть keyframes.

Не умеете в код - идите в условный svgator и там мышкой всё наклацаете.

[Ankhena]

Альберт Макс, в смысле это не сама форма, а её демка?
Ну хоть прямо svg и используйте или переведите в Lottie или типа того.

[Максим]

Ankhena, я не совсем понял, что там должно произойти ? Это анииация типа курсор сам двигается и происходит типа ховер?

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4