Тут описано
https://ru.stackoverflow.com/a/926581/183608
ЗАДАЧА 3. НАДПИСЬ (Handwriting)
За пример были взяты работы с codepen:
пример1,
пример2. Перепробовав все возможные варианты:
Открываем adobe illustrator
Пишем любой текст, задаем необходимый шрифт, размер
Выбираем слой текст и жмем:
CTRL+SHIFT+O или
Type -> Create outlines
Это все будет наш
clip-path. Блокируем этот слой.
Создаем новый слой или группу слоев.
Выбираем карандаш и аккуратно (на сколько это возможно) прорисовываем каждую букву по отдельности.
Это будет наш
stroke который мы будем анимировать.
Сохраняем в
svg вставляем в
html(pug) код.
Анимация заключается в изменении значения
stroke-dashoffset:
path {
stroke-width: 7;
animation: dash 8s linear forwards infinite;
stroke-dasharray: 2200;
stroke-dashoffset: 2200;
}
@keyframes dash {
0% {
stroke-dashoffset: 2200;
}
100% {
stroke-dashoffset: 0;
}
}
При этом важно задать
stroke-width такой, чтобы полностью заполнить букву.
Получаем:
codepenP.S: буквы обрисовала не аккуратно, поэтому есть заметные изъяны).
Средний
