Как анимировать SVG path через anime.js?

Question

[Александр Панков]

Здравствуйте, мне необходимо "нарисовать" логотип, чтобы как-будто его от руки рисовали.
я нарисовал в фотошопе лого, потом в иллюстраторе перевел в свг (тут думаю и косяк, не подскажите инструкцию по экспорту для веба..)

нагуглил библиотеку, вроде новая..
стал использовать, но у меня анимируется только обводка и я понимаю почему, все же логично, через CSS оно так отступами и "рисуется"..
Но проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?
Вот я накидал пример: https://codepen.io/untca/pen/bYGXaB

Заранее благодарен за ответы

Answer 1

[Ivan Bogachev]

проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?

Вам нужно взять векторный графический редактор и нарисовать path`ы не по контуру ваших линий, образующих буквы, а вдоль них, по их середине (если относительно линии можно сказать "середина"), в том направлении, в котором буквы пишутся. Потом задать получившимся path`ам большое значение stroke-width и сделать то, что вы уже сделали с anime.js в вашем примере. Получится примерно то, что вы хотите увидеть. Также будет не лишним взглянуть на свойство stroke-linecap, чтобы добавить округлостей и сделать линию более естественной.

PS.: Очевидная проблема такого подхода - сложно сделать именно такие скругления на краях букв, как вы нарисовали. Так что если вы хотите в браузере анимировать "рисование" того, что есть, единственный путь - анимация фона у уже имеющихся path-элементов. По сути нужно будет сделать все возможные фоны у каждой буквы по мере ее рисования. Начальный запрос в гугл - fill SVG path element with a background-image, дальше - CSS анимации. Это очень долго, сложно и будет сильно тормозить. В таком случае я бы склонился к тому, чтобы в Ae все нарисовать и гифкой вставить.