Создание эффекта рукописного текста

Эффект рукописного текста в веб-интерфейсах строится на поэтапной прорисовке контуров букв. Основой выступает преобразование текста в SVG-кривые, поскольку только path-геометрия позволяет контролировать процесс «рисования» линии.

Типовой pipeline включает следующие этапы:

  • преобразование текста в SVG paths (через редакторы или библиотеки)
  • применение CSS-свойств обводки (stroke)
  • настройка параметров скрытия линии (stroke-dasharray, stroke-dashoffset)
  • анимация появления контуров
  • последующее заполнение (fill)

Ключевое ограничение SVG-текста заключается в том, что <text> не предоставляет доступ к точной геометрии букв. Поэтому применяется конвертация в <path>.

Базовая геометрия эффекта рисования

Механизм имитации рисования основан на управлении длиной обводки.

Основные свойства SVG

stroke-dasharray: 1000;
stroke-dashoffset: 1000;
  • stroke-dasharray задаёт шаблон штриха и пробела
  • stroke-dashoffset сдвигает начало отрисовки
  • равные значения позволяют скрыть линию полностью

При изменении stroke-dashoffset от полного значения к нулю создаётся эффект постепенного появления линии.

Принцип работы Vivus

Vivus — библиотека, предназначенная для SVG-анимации, ориентированной на эффект отрисовки.

Она автоматизирует:

  • вычисление длины path
  • установку dash-параметров
  • управление таймингом анимации
  • последовательную отрисовку элементов SVG

Базовая инициализация Vivus

new Vivus('svg-container', {
  duration: 200,
  type: 'oneByOne'
});

Параметры:

  • duration — длительность анимации в кадрах
  • type — способ отрисовки
  • svg-container — id SVG-элемента

Подготовка текста к анимации

SVG-текст должен быть преобразован в контуры. Обычно используется:

  • Adobe Illustrator (Create Outlines)
  • Inkscape (Object to Path)
  • Figma (Outline Stroke / Convert to outlines)

Результат представляет набор <path>:

<svg id="svg-container" viewBox="0 0 600 200">
  <path d="M10 80 C 40 10, 65 10, 95 80" />
  <path d="M110 80 C 140 10, 165 10, 195 80" />
</svg>

Каждый символ или часть букв становится отдельной геометрией.

Режимы анимации Vivus

oneByOne

Последовательная отрисовка каждого path:

new Vivus('svg-container', {
  duration: 150,
  type: 'oneByOne'
});

Используется для имитации письма, где каждая буква появляется отдельно.

sync

Все элементы анимируются одновременно:

new Vivus('svg-container', {
  duration: 150,
  type: 'sync'
});

Применяется для быстрого появления сложных логотипов и декоративных надписей.

delayed

Смешанный режим с задержкой:

new Vivus('svg-container', {
  duration: 200,
  type: 'delayed',
  delay: 80
});

Каждый элемент стартует с небольшим смещением во времени.

Создание эффекта рукописного текста

Для имитации реального письма важна последовательность штрихов, напоминающая движение пера.

Подход 1: структурированная сегментация букв

Каждая буква разбивается на отдельные path:

  • основной штрих
  • дополнительные линии
  • соединительные элементы

Vivus последовательно прорисовывает их.

Подход 2: единый path на слово

При использовании одного сложного path эффект становится более плавным:

<path d="M20 100 L50 20 L80 100 ..." />

Vivus анализирует общую длину контура и распределяет анимацию по всей траектории.

Управление скоростью прорисовки

Скорость определяется параметром duration, но визуальное ощущение зависит от длины path.

Пример:

new Vivus('svg-container', {
  duration: 300,
  type: 'oneByOne'
});
  • большее значение — медленный эффект письма
  • меньшее значение — быстрый «рисующийся» логотип

Добавление эффекта чернил (fill transition)

После завершения обводки часто применяется заполнение цвета.

CSS-переход

svg path {
  fill: transparent;
  transition: fill 0.4s ease;
}

svg.finished path {
  fill: black;
}

JS-логика завершения

new Vivus('svg-container', {
  duration: 200,
  type: 'oneByOne',
  onReady: function () {
    this.el.classList.add('ready');
  },
  onComplete: function () {
    this.el.classList.add('finished');
  }
});

Синхронизация с пользовательскими событиями

Vivus позволяет запускать анимацию по триггеру:

const animation = new Vivus('svg-container', {
  duration: 180,
  type: 'delayed',
  start: 'manual'
});

document.addEventListener('click', () => {
  animation.play();
});

Такой подход используется для:

  • интерактивных заголовков
  • эффектов при наведении
  • анимаций при скролле

Использование easing для естественности движения

Хотя Vivus не предоставляет сложные easing-функции напрямую, можно комбинировать с CSS-анимацией контейнера:

svg path {
  stroke-dashoffset: 0;
  animation: draw 2s ease-in-out;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Vivus при этом может использоваться как генератор базовых значений длины пути.

Имитация почерка через вариативную толщину линии

Дополнительная выразительность достигается изменением stroke-width:

path {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Комбинация:

  • stroke-linecap: round имитирует мягкий конец пера
  • stroke-linejoin: round сглаживает соединения линий

Сложные композиции из нескольких SVG

При построении рукописного текста целого абзаца используется несколько SVG-слоёв:

<svg id="line1">...</svg>
<svg id="line2">...</svg>
<svg id="line3">...</svg>

Инициализация:

new Vivus('line1', { duration: 120, type: 'oneByOne' });
new Vivus('line2', { duration: 120, type: 'oneByOne' });
new Vivus('line3', { duration: 120, type: 'oneByOne' });

Синхронизация осуществляется через задержки или цепочку вызовов onComplete.

Контроль последовательности отрисовки

Для точного имитирования письма применяется ручная сортировка path:

  • сортировка по координате X
  • сортировка по координате Y
  • ручное задание порядка элементов SVG

Пример структуры:

<path id="p1" d="..." />
<path id="p2" d="..." />
<path id="p3" d="..." />

Vivus отрисовывает элементы в DOM-порядке.

Оптимизация производительности

При большом количестве path возникают проблемы производительности:

  • увеличение времени расчёта длины пути
  • нагрузка на repaint SVG

Практика оптимизации:

  • объединение мелких path
  • упрощение кривых (reduce points)
  • использование will-change: stroke-dashoffset

Работа с шрифтами и кастомной типографикой

Рукописный эффект усиливается использованием шрифтов с естественной каллиграфией перед конвертацией в SVG:

  • скриптовые шрифты
  • каллиграфические гарнитуры
  • нестабильные рукописные формы

После конвертации каждый глиф превращается в независимый path, который Vivus может анимировать как отдельный штрих.

Расширенные сценарии комбинирования анимаций

Vivus часто используется как базовый слой анимации, поверх которого накладываются дополнительные эффекты:

  • параллакс смещение SVG
  • изменение прозрачности во время рисования
  • синхронная анимация фона
  • шумовые фильтры SVG (feTurbulence)

Пример комбинированного поведения:

new Vivus('svg-container', {
  duration: 250,
  type: 'delayed',
  onFrame: function () {
    // синхронизация внешних эффектов
  }
});

Поведение при повторной анимации

Повторный запуск требует сброса состояния:

animation.reset().play();

Сброс восстанавливает исходные значения stroke-dashoffset, позволяя повторить эффект письма без пересоздания DOM.

Итоговые принципы построения эффекта рукописного текста

  • использование SVG path вместо текстовых узлов
  • управление stroke-dashoffset как основа анимации
  • применение Vivus для автоматизации последовательности
  • сегментация букв для контроля «почерка»
  • синхронизация появления с логикой интерфейса
  • комбинирование с fill-анимацией и визуальными эффектами
Оглавление