Как реализовать такую анимацию на SVG?

Question

[Lord_Dantes]

1. Как можно реализовать такой блок чтобы можно было менять картинку
2. При наведении чтобы полоска анимировалась вокруг картинки.
И 3. Если это возможно создание случайных такого рода линий

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

Answer 1

[RAX7]

https://svg-art.ru/?p=1783

Comments

[Lord_Dantes]

Благодарю!

Answer 2

[HamSter]

Простой пример (с css-tricks):

.path {
  stroke-dasharray: 500;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

Comments

[Антон Литвиненко]

я все жду, когда голова догонит хвост...

[HamSter]

Антон Литвиненко, судя по вопросу - не должна догонять, но по ссылке можно и такой пример увидеть - реализовать!

[Lord_Dantes]

Собственно на этом сайте я тоже провёл время !) Видимо проблема все таки в path, решение есть, а вот нарисовать готовый пятиугольник это другого рода задача. Спасибо!