¿Cómo abordar la animación de un svg de izquierda a derecha? [Web]

Podría simplemente usar su imagen y usar una transición de posición usando CSS.

Pero probablemente te estés refiriendo a que los puntos deben permanecer fijos en el espacio y comenzar a iluminarse a medida que pasan las letras.

Probablemente sea más fácil animar en After Effects u otra aplicación (incluido Photoshop) usando una máscara de patrón punteado y moviendo una capa debajo del patrón y exportándola como un gif animado. (Puedes ver ligeramente que la E está en un cuadrado debajo del patrón)

Pero usando la misma lógica, podría usar un PNG transparente como máscara y animar un div debajo de la imagen, nuevamente usando CSS.

<style>
img {
  background-image: url(E.png);
  background-position:-1000px;
  background-repeat: no-repeat;
  transition: all linear 1s;}
img:hover {
  background-position: 0px;}
</style>

<img src="Mask.png" />

Abra esto y coloque el mouse sobre la cuadrícula.

http://otake.com.mx/Foros/MaskTest/Test1.html

Necesita sincronizar la velocidad de la animación, para que no tenga semicírculos. Pero esto era sólo una prueba simple.

En este ejemplo, dejé la cuadrícula en gris para que pueda verla, pero el efecto sería mejor, por supuesto, usando blanco.

Puede lograr este resultado de diferentes maneras. Pero la forma más elegante que se me ocurrió es usar el enmascaramiento SVG para esto. Sara Soueidan escribió un gran artículo sobre esto: https://sarasoueidan.com/blog/css-svg-clipping/

En pocas palabras, puede hacer lo siguiente:

1. Agrupa cada línea
2. Duplica cada grupo y ajusta su color.
3. Aplique una máscara a cada grupo duplicado, de modo que todos los grupos duplicados queden ocultos.
4. Anime su máscara en el navegador con CSS o JS.

La ventaja de este método es que puede aplicar no solo el color, sino también la imagen o incluso la película para enmascarar. Espero que esto te ayudará :)