Este codepen está inspirado en el trabajo de Sten Hougaard

Preparativos

Creemos dos contenedores para diferentes implementaciones de animación:

 
Animated text
  



 
Click on me!
  

He creado svg usando Adobe Illustrator, la característica principal debe ser una altura pequeña y un ancho grande.
Es importante mencionar que svg es hijo de un elemento de encabezado ya que posicionaremos svg en relación con él.

CSS

Transformamos nuestros contenedores en cajas flexibles para colocar todo elegantemente en el centro.

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

h1 {
 display: inline;
 position: relative;
}   

inline se usa simplemente para reducir el ancho del elemento a su contenido ya que svg dependerá de él

A continuación, debemos colocar svg en relación con un encabezado:

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

Utilizamos el método estándar para colocar el elemento relativo en el centro del padre. Para ajustar svg al texto, debemos aplicar min-width y min-height.

Lógica de animación con javascript.

Para animar elementos en javascript podemos usar el maravilloso método de animación (fotogramas clave, opciones).

Fotogramas clave

Analicemos la función getDrawingParameters, que proporciona propiedades sobre las que 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;
};

Primero, necesitamos saber qué tan larga es realmente nuestra ruta, usando el método svg getTotalLength:

const length = path.getTotalLength();

Ahora, deberíamos usar nuestra longitud calculada para simular el dibujo. Definamos nuestro punto de partida. Necesitamos el atributo strokeDasharray:

path.style.strokeDasharray = length;

Aquí le decimos a este atributo que dibuje un camino con alternancia de un guión (tamaño=longitud) y un espacio (tamaño=longitud).

El siguiente atributo, donde necesitamos longitud es stroke-dashoffset:

path.style.strokeDashoffset = length;

Este valor indica que el cálculo de la matriz de guiones se realiza según el valor de longitud. Y dado que configuramos nuestra matriz de guiones en 'longitud del guión-longitud del espacio-longitud del guión-longitud del espacio-longitud...', la ruta inicial estará vacía (espacio).

Entonces, definimos nuestras propiedades iterables en una matriz:

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

Utilizamos el desplazamiento para definir el tiempo relativo en el que se debe alcanzar esta propiedad. Fue creado para imitar el retraso en cada iteración.

Opciones

El segundo argumento del método animado son opciones:

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

Configuramos nuestra animación en iteraciones infinitas y 10 segundos de duración. ¿Recuerdas la compensación? nuestra animación "activa" tarda sólo 1,5 segundos.