Как анимировать SVG?

Question

[Евгений]

Добрый день!

Есть вот такая SVG картинка:


https://codepen.io/evgen-dev/pen/oNzwZWV

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

Спасибо.

Comments

[Kovalsky]

https://codepen.io/MyXoToD/post/howto-self-drawing...

[h8nor]

Если к коду кривой применить https://regex101.com/ M[- .,0-9CL]+Z, то выделяется 76 отдельных замкнутых линий. Самая длинная группа и является кривой с двойной обводкой (Z надо убрать).
Посмотрел на каком-то древнем инструменте: https://scrollmagic.io/examples/advanced/svg_drawi...

Answer 1

[uvelichitel]

В svg картинка должна быть отрисована элементом path обязательно со свойством stroke

<svg viewBox="0 0 340 333">
  <path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

На чистом css(без JS) фокус делается манипуляцией свойствами stroke-dasharray, stroke-dashoffset

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Работаюший пример https://codepen.io/chriscoyier/pen/bGyoz

Comments

[Евгений]

Остановился на этом варианте, визуально оно, конечно, отличается, но вполне приемлемо выглядит.

Answer 2

[approximate solution]

https://maxwellito.github.io/vivus/

Answer 3

[lagudal]

Если нужно анимировать именно path, а не stroke, т.е. когда речь идет не о четкой линии с постоянной толщиной, а о фигуре с размытыми, рваными краями, не имеющей четкой толщины, то к вышеизложенному clip-path.
Как варианты, пример1 , пример2 , пример3.
Ну или что угодно еще в этом же духе на тему Masking SVG Animations

Answer 4

[Олег]

По примерам
https://dev.w3.org/SVG/tools/svgweb/samples/