Как анимировать рукописный текст на веб-странице с помощью SVG?

Я пытаюсь анимировать текст, который я создал и сохранил как SVG. До сих пор мне удалось анимировать только удар, но это не то, что я пытаюсь достичь. Вот ссылка на пример, в котором я нуждаюсь:

[http://codepen.io/se7ensky/pen/waoMyx][1] [https://codepen.io/munkholm/pen/EaZJQE][1] 

Я буду очень признателен, если кто-нибудь сможет объяснить, как я могу это реализовать.

Вот что я имею до сих пор:

  [https://codepen.io/sora1/pen/LZNZva][1] 

Как работает анимация Se7ensky, так это то, что она использует стандартную технику тире анимации, но зажимает анимированный штрих с контуром, представляющим оформленный на руке внешний вид логотипа.

Таким образом, стандартная техника анимации тире работает следующим образом. Вы берете стандартную линию:

    

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

Это сообщение в блоге от CSS-Tricks объясняет это довольно хорошо (обратите внимание, что svg должен иметь штрихи для этого): https://css-tricks.com/svg-line-animation-works/

Вот руководство по инсульт-dashoffset (используемое на примере), которое может быть полезно: https://css-tricks.com/almanac/properties/s/stroke-dashoffset/

  • Анимация CSS3 с gradleиентами
  • Продолжительность анимации строки UITableView и обратный вызов завершения
  • Простая анимация с использованием C # / Windows Forms
  • Как оживить просмотр с переводом анимации в Android
  • Android делает анимированное видео из списка изображений
  • Как создать импульсный эффект с использованием -webkit-animation - наружные кольца
  • Метод доступа после завершения анимации UIImageView
  • Android View исчезает, когда выходит за пределы родителя
  • WPF Fade Animation
  • css3 анимация on: hover; заставить всю анимацию
  • Анимация в панели уведомлений Пользовательский вид
  • Давайте будем гением компьютера.