Este codepen é inspirado no trabalho de Sten Hougaard

Preparativos

Vamos criar dois contêineres para diferentes implementações de animação:

 
Animated text
  



 
Click on me!
  

Eu criei svg usando o Adobe Illustrator, a principal característica dele deve ser altura pequena e largura grande.
É importante mencionar que svg é filho de um elemento de cabeçalho, pois posicionaremos svg em relação a ele.

CSS

Transformamos nossos contêineres em flexboxes para posicionar tudo graciosamente no centro.

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

h1 {
 display: inline;
 position: relative;
}   

inline é usado para simplesmente reduzir a largura do elemento em relação ao seu conteúdo, já que o svg dependerá dele

Em seguida, devemos posicionar svg em relação a um cabeçalho:

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

Usamos o método padrão para posicionar o elemento relativo no centro do pai. Para ajustar o SVG ao texto, devemos aplicar min-width e min-height.

Lógica de animação com javascript

Para animar elementos em javascript, podemos usar o maravilhoso método animate(keyframes, options).

Quadros-chave

Vamos dissecar a função getDrawingParameters, que fornece propriedades para iterar:

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;
};

Primeiro, precisamos saber qual é realmente a extensão do nosso caminho, usando o método svg getTotalLength:

const length = path.getTotalLength();

Agora, devemos usar nosso comprimento calculado para simular o desenho. Vamos definir nosso ponto de partida. Precisamos do atributo strokeDasharray:

path.style.strokeDasharray = length;

Aqui, dizemos a este atributo para desenhar um caminho com alternância de um traço (tamanho=comprimento) e um espaço (tamanho=comprimento).

O próximo atributo, onde precisamos do comprimento, é stroke-dashoffset:

path.style.strokeDashoffset = length;

Este valor informa que o cálculo da matriz de traços é puxado pelo valor do comprimento. E como definimos nossa matriz de traços como 'comprimento do traço comprimento do intervalo comprimento do traço comprimento do intervalo ...', o caminho inicial estará vazio (gap).

Então, definimos nossas propriedades iteráveis ​​em array:

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

Usamos offset para definir o tempo relativo em que esta propriedade deve ser alcançada. Foi feito para imitar o atraso a cada iteração.

Opções

O segundo argumento do método animate é options:

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

Definimos nossa animação para iterações infinitas e duração de 10 segundos. Lembra do deslocamento? nossa animação "ativa" leva apenas 1,5 segundos.