Как сделать анимацию по линиям для SVG?

Question

[xonar]

Здравствуйте.

Есть SVG, пытаюсь на него навесить анимацию, чтоб рисунок появлялся по линиям (Чтобы каждый элемент обводился линиями. Но, ничего не происходит. А вот анимация с плавным появление opacity и т.д. всё работает.

Код: https://codepen.io/ruslan-lysenko/pen/jONwzOj

Answer 1

[Yuriy Fred]

Буквально вчера наткнулся на одном телеграмм канале.
Может чем то поможет вам этот сервис https://svgartista.net/
Там вроде как разные виды анимаций для свг есть

Comments

[xonar]

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

[Yuriy Fred]

xonar, тоже вчера обратил внимание на этот сервис, хотя сам не занимаюсь программированием и всякими анимациями свг файлов)

Answer 2

[lagudal]

У вас в самом коде svg контуров - stroke - вообще нет, как бы они должны быть, чтобы было чего обводить )

Comments

[xonar]

Всё верно, так оно и оказалось. Я почему-то был уверен (ох эта уверенность), что их не обязательно указывать. Спасибо за подсказку)

[lagudal]

себя обрисовал? )
неплохо получилось, я даже думаю, stroke-dashoffset анимация тут лишняя - хотя конечно дело вкуса )
Я бы из кусочков целое собирал, есть где развернуться в плане креатива.
Например, хотя бы как тут, но можно и что то другое придумать.

[xonar]

lagudal, Девушку попросил накидать на coreldraw меня)) Сам бы я не смог, я у мамы рукожоп)