Этот код создан по мотивам работы Стена Хугаарда

Препараты

Давайте создадим два контейнера для разных реализаций анимации:

 
Animated text
  
 



 
Click on me!
  
 

Я создал SVG с помощью Adobe Illustrator, его основной особенностью должна быть небольшая высота и большая ширина.
Важно отметить, что svg является дочерним элементом элемента заголовка, поскольку мы будем позиционировать svg относительно него.

CSS

Мы преобразуем наши контейнеры во флексбоксы, чтобы все изящно располагалось по центру.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline используется для простого уменьшения ширины элемента до его содержимого, поскольку svg будет полагаться на него

Далее нам нужно расположить SVG относительно заголовка:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

Мы используем стандартный метод для позиционирования относительного элемента в центре родительского элемента. Чтобы подогнать SVG к тексту, нам следует применить минимальную ширину и минимальную высоту.

Логика анимации с помощью JavaScript

Для анимации элементов в JavaScript мы можем использовать замечательный метод animate(keyframes, options).

Ключевые кадры

Давайте разберем функцию getDrawingParameters, которая дает свойства для перебора:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

Во-первых, нам нужно узнать, какова на самом деле длина нашего пути, используя метод svg getTotalLength:

const length = path.getTotalLength();

Теперь нам нужно использовать вычисленную длину для имитации рисования. Давайте определим нашу отправную точку. Нам нужен атрибут strokeDasharray:

path.style.strokeDasharray = length;

Здесь мы указываем этому атрибуту рисовать путь с чередованием одного тире (размер=длина) и одного пробела (размер=длина).

Следующий атрибут, в котором нам нужна длина, — это stroke-dashoffset:

path.style.strokeDashoffset = length;

Это значение указывает, что вычисление массива тире выполняется по значению длины. И поскольку мы установили для нашего массива тире значение «длина тире, длина промежутка, длина промежутка, длина промежутка...», начальный путь будет пустым (пробел).

Итак, мы определяем наши итерируемые свойства в массиве:

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

Мы используем смещение, чтобы определить относительное время, в которое это свойство должно быть достигнуто. Это было сделано для имитации задержки на каждой итерации.

Параметры

Вторым аргументом метода animate являются параметры:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

Мы установили для нашей анимации бесконечное количество итераций и продолжительность 10 секунд. Помните офсет? наша «активная» анимация занимает всего 1,5 секунды.