Как сделать такую анимацию?

Question

[Иван]

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

Comments

[imko]

https://developer.mozilla.org/en-US/docs/Web/CSS/t...

[DIVSIDE]

Реализовать нужно так, чтобы изображение человека было не разделено на части

Ответ: Никак

Answer 1

[Sergey Semenov]

Использовать маску, придется к каждой картинке дополнительно подгружать подготовленную маску.

Answer 2

[Андрей Зырянов]

Разрезаете пунктирную линию на 2 svg (в условии же не было не разрезать пунктир?)
Через z-index одну размещаете впереди картинки, вторую позади.
Позиционируете их, чтобы правильно стыковались.
Анимируете CSS-свойство stroke-dashoffset