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

Question

[Дядя Ваня]

Здравствуйте, подскажите пожалуйста как сделать вот такую вот анимацию как на картинке ниже.
Мне надо сделать так, как будто ручкой кто-то рисует это
Может есть примеры где-то готовой похожей анимации?

Answer 1

[Developer]

С ходу видится такое решение: надо двигаться по окружности, у которой с каждой итерацией изменяется радиус. Радиус r должен меняться линейно от значения r1 до r2, при достижении r значения r2 сделать r1 равным r2, и вычислить новое значение r2.
При этом для абсцисс и ординаты свои значения r: rx и ry
Продолжать двигаться по окружности n итераций

Answer 2

[Ihor Bratukh]

Svg: animate stroke

Comments

[jeruthadam]

Так ведь это не stroke а path

Answer 3

[lukoie]

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

Comments

[Дядя Ваня]

Да , точно, без ручки)Просто анимация)

[lukoie]

Дядя Ваня, тогда по любому свг анимацией как Вам выше и писали.
попробуйте https://maxwellito.github.io/vivus/

[Дядя Ваня]

Спасибо