Как сделать эффект написания текста с помощью svg?

Question

[Юпитер Макс]

Всем привет!

Возникла потребность реализовать эффект написания ручкой текста svg. С помощью чего можно это реализовать? Или может быть использовать какой-то другой подход, не svg?

Answer 1

[RAX7]

Посмотри как сделано тут
https://codepen.io/munkholm/pen/EaZJQE
https://codepen.io/marinamcpeak/pen/XYNdvd

Answer 2

[HamSter]

Тут описано 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 такой, чтобы полностью заполнить букву.

Получаем: codepen

P.S: буквы обрисовала не аккуратно, поэтому есть заметные изъяны).

Comments

[Юпитер Макс]

Спасибо за подробно расписанный ответ :) Проблема только с иллюстратором, у меня его нет ))

[HamSter]

Юпитер Макс, inkscape вроде более простая альтернатива. Без отрисовки в редакторе вряд ли получится.

[Юпитер Макс]

HamSter, да, именно его сейчас и юзаю, спасибо))

[Юпитер Макс]

HamSter, еще раз хочу вас побеспокоить ) Как вы сохранили документ в svg чтобы у вас все path получились завернуты в clip-path. Я пробую, у меня получается полная ерунда )) Буду очень благодарен за помощь )

[HamSter]

Юпитер Макс, а это уже все ручками в редакторе) Т.е. сохраняете svg с надписью и обводкой каждой буквы.

Буквы оборачиваем в clip-path.

<svg ...

<!--  ---------- текст -->

<defs>  
	<clipPath id="clip-i-1"><path ...
        <clipPath id="clip-i-2"><path ...
        <clipPath id="clip-i-N"><path ...
</defs>

<!-- --------- обводка -->

<g class="stroke">  
        <g clip-path="url(#clip-i-1)">
             <path ...
        <g clip-path="url(#clip-i-2)">
             <path ...
        <g clip-path="url(#clip-i-N)">
             <path ...
</g>   
</svg>

[Юпитер Макс]

HamSter, понял. Спасибо большое )