Guía completa: Cómo crear una animación SVG con CSS

Normalmente, cuando nos movemos en el mundo web, creamos animaciones o transiciones basadas en HTML, CSS y JavaScript. Así que a lo mejor ya has experimentado bastante usando estos. Pero, ¿qué ocurre si añadimos un SVG y un poco de magia a esta combinación?

En esta entrada, vamos a explorar cómo darle movimiento a nuestras páginas al crear una animación SVG con CSS. Veremos paso a paso llevar tus diseños a otro nivel usando animaciones únicas.

Convertir un texto a SVG

En este caso, animaremos un texto, aunque podrías hacer lo mismo con un logo u otro SVG. En nuestro ejemplo, el SVG tiene un solo <path> (más adelante explico esta etiqueta), pero si el SVG tuviera múltiples trazos, el proceso sería más largo, aunque no más complicado.

Yo he utilizado Figma, pero puedes usar Adobe Illustrator u otro software de diseño, incluso puedes utilizar el logo de tu marca diseñado por un equipo profesional. De todas formas, yo te muestro aquí cómo exportar un texto en SVG desde Figma.

Insertar SVG en el código

Con el SVG descargado, puedes abrirlo en Visual Studio Code o tu editor de preferencia. Verás algo como esto:

Es solo un fragmento de las primera linea de nuestro SVG, porque suelen ser bastante largos. Este código es el que va a dibujar el SVG, son coordenadas con algunas instrucciones que permiten dibujar formas complejas que dan como resultado, en este caso el texto que hemos escrito previamente.

Este fragmento contiene las coordenadas y comandos que dibujan el SVG, en este caso el texto. Copia el código completo y pégalo en tu HTML donde quieres que se muestre. Para que destaque, yo he creado dos <div>: uno para el fondo y otro como contenedor del SVG.

Si en Figma, al crear el texto, lo hicimos demasiado pequeño, podemos modificarlo sin cambiar la calidad de la imagen, modificando el width y el height.

Inicializar estilos del SVG

Para animar un elemento SVG, debemos enfocarnos en la etiqueta <path>, que es la que define los vectores o trazados dentro del archivo.

La función principal de <path> es describir formas geométricas complejas mediante coordenadas, como líneas, curvas… Por ejemplo, un <path> puede representar desde una línea recta, hasta un dibujo, como el contorno de una letra en una tipografía, como es nuestro caso. Es por esto, que aunque se trate de un texto, al estar en SVG tiene propiedades específicas que difieren de CSS.

Aunque estemos tratando con un texto, al estar dentro de un SVG tendrá propiedades específicas que difieren de las típicas en CSS. Por ejemplo, en lugar de color o background-color, el SVG usará fill para definir el color del contenido de la forma. Además, lo que normalmente conocemos como border en CSS, en SVG se traduce a stroke, que define el contorno del trazo, es importante entender esto para para crear una animación SVG con CSS.

Lo que tengo planteado para nuestro texto en SVG, es que parta de ser transparente y poco a poco vaya cogiendo color mientras que se va escribiendo el trazo de manera fluida. Así que para ello vamos a partir de estos estilos dados al path:

.title svg path {
  fill: transparent;
  stroke: #fff;
  stroke-width: .2;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

• fill: Define el color de relleno de la forma. Lo inicializamos en transparente para que sea invisible al inicio.
• stroke: Da color al trazo.
• stroke-width: Define el grosor del trazo. Por defecto trae de 1 y en mi caso particular me parecía demasiado grueso, así que le puse 0.2.
• stroke-dasharray: esta propiedad nos permite crear un trazo en línea discontinua, dividiendo el trazo en secciones dibujadas y no dibujadas. El valor que le asignamos a stroke-dasharray define, en unidades, cuánto se dibuja y cuánto se deja sin dibujar. Para encontrar el valor ideal que permita que el SVG se dibuje completamente, necesitamos hacer pruebas, ajustando los valores hasta que logremos que el trazo aparezca de manera continua. El valor en el que el trazo se vea completo será nuestro valor inicial.
• stroke-dashoffset: con esta propiedad, le daremos un offset al stroke-dasharray, lo cual permitirá que sea justo la parte donde se queda sin dibujar sea que se muestre, es por eso que va a tener el mismo valor que el anterior.

Animar el SVG

Ahora que tenemos listo los estilos iniciales, solo queda crear la animación, para ello añadimos una animación que tarde unos 6 segundos de inicio a fin y que solo se ejecute una vez

.title svg path {
  fill: transparent;
  stroke: #fff;
  stroke-width: .2;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: textAnimation 6s ease-in-out forwards;
}

Así que solo nos quedaría variar el stroke-dashoffset y el fill para crear ese efecto de que aparece y se dibuja:

@keyframes textAnimation {
  0% {
    stroke-dashoffset: 600;
  }
  90% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}

Partimos de stroke-dashoffset igual a 600 y lo llevamos a 0 que es donde se va a mostrar el trazo completo, y le he añadido un poco de retraso al fill para que no empiece la transición a blanco desde el inico.

Para terminar lo podemos poner sobre un fondo y hacer un efecto de acercar dicho fondo a la vez que se dibuja el texto.

See the Pen CSS + SVG by David Boo (@David-Boo) on CodePen.

Conclusión

Crear una animación SVG con CSS no solo agrega dinamismo a una página web, sino que también permite aprovechar los beneficios de SVG en términos de escalabilidad y nitidez. Puedes experimentar con distintos valores y ajustes, consiguiendo resultados creativos y únicos. Si quieres que tus páginas destaquen, las animaciones SVG son una buena opción para llamar la atención del usuario y hacer que la experiencia visual sea memorable.