@vardoLP
Ват ю сэй эбаут май мама?!

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

Всем привет!

Возникла потребность реализовать эффект написания ручкой текста svg. С помощью чего можно это реализовать? Или может быть использовать какой-то другой подход, не svg?
  • Вопрос задан
  • 2297 просмотров
Решения вопроса 2
RAX7
@RAX7
Ответ написан
Комментировать
HamSter007
@HamSter007
HTML/CSS верстальщик
Тут описано 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: буквы обрисовала не аккуратно, поэтому есть заметные изъяны).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы