Las animaciones web son más que solo un adorno visual. Cuando se utilizan de manera efectiva, pueden mejorar la experiencia del usuario ofreciendo retroalimentación visual, guiando a los usuarios a través de tareas y mejorando la interactividad general del sitio web.

Las animaciones web tienen diversas variantes, y se recomienda evitar GIFs y videos pesados que puedan obstaculizar la velocidad del sitio web. En su lugar, elige opciones ligeras como SVG con CSS para una velocidad óptima. Esto te ayuda a crear animaciones más eficientes que cargan más rápido, asegurando una experiencia de usuario más fluida y tiempos de carga de página más rápidos.

En este artículo, exploraremos la creación de animaciones simples y escalables utilizando SVG y CSS. Los únicos requisitos son un conocimiento básico de CSS y algún conocimiento de SVG. Accede a este repositorio en GitHub para obtener el código fuente completo, que incluye HTML/SVG y CSS.

Casos comunes de uso para animar SVG con CSS

Los SVG se integran fácilmente en diferentes situaciones, ofreciendo una flexibilidad impresionante para preservar la calidad gráfica al escalarlos. Antes de adentrarnos en el código, echemos un vistazo a casos prácticos de uso para SVG estáticos y animados.

Los SVG son ideales para crear iconografía adaptable y escalable para aplicaciones modernas. Ofrecen posibilidades de animación superiores a las fuentes de iconos y a los íconos de imágenes PNG.

Íconos

Los íconos SVG animados son especialmente beneficiosos para interacciones sutiles y retroalimentación visual en pantallas de incorporación, indicadores de carga, interruptores de menú, controles de reproducción de video y mucho más.

Visualizaciones de Datos

Las visualizaciones de datos pueden utilizar SVG para crear gráficos, diagramas y gráficos limpios, escalables, dinámicos y altamente personalizables. Bibliotecas de visualización de datos como D3.js también emplean SVG junto con elementos de lienzo (canvas) y HTML.

Estados interactivos

La integración de ilustraciones SVG en un producto simplifica tareas como la generación, adición o eliminación de datos, mejorando la facilidad de uso. Ejemplos incluyen mostrar el progreso, mejorar estados vacíos e incorporar microinteracciones atractivas para mejorar la experiencia del usuario.

Calcomanías y emojis

Los SVG son perfectos para crear calcomanías y emojis animados, aportando elementos dinámicos y expresivos a una aplicación.

Cómo preparar SVGs para animación

En este tutorial, nos centraremos en crear SVGs desde cero e integrar animaciones. También examinaremos ejemplos de SVGs preexistentes.

Comencemos explorando un código SVG simple para animaciones, comenzando con la preparación del código.

Optimizando el código SVG

La optimización es esencial para minimizar el tamaño del archivo SVG y eliminar etiquetas y metadatos redundantes. Un SVG generado puede incluir código innecesario, por lo que es recomendable utilizar una herramienta como SVG Cleaner para limpiarlo.

Creando agrupaciones intencionales

En SVG, la etiqueta <g> se utiliza para agrupar múltiples elementos SVG con el fin de estructurarlos de manera organizada y aplicar transformaciones o animaciones colectivas. Este grupo puede recibir un nombre y estilo asignándole un ID o una clase. Sin embargo, para elementos SVG individuales o un grupo singular, la etiqueta de grupo no es necesaria:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  id="hamburger-icon"
  ...>
  <g class="bar top-bar">...</g>
  <g class="bar middle-bar">...</g>
  <g class="bar bottom-bar">...</g>
</svg>

Si tu objetivo es aplicar el mismo estilo a varios grupos, convertir nombres de ID en nombres de clase también es una opción viable.

Sé consciente del orden de apilamiento

Las formas SVG se pintan secuencialmente de arriba a abajo. Para colocar una forma en el fondo, colócala antes en el código. Ten en cuenta que la propiedad z-index de CSS no afecta a los elementos SVG, así que prioriza el orden de origen para un apilamiento adecuado.

Establecer el estilo SVG al estado inicial preferido

Los SVG utilizan atributos de presentación (por ejemplo, fill, stroke, stroke-width) directamente en el código, priorizados hasta que sean anulados por CSS externo (sin !important). Considera conservar los atributos de ancho y alto para una carga más suave en conexiones más lentas, evitando el escenario de destello de SVG sin estilo (FOUS, por sus siglas en inglés).

Te puede interesar: Cómo Detener Completamente el Spam en el Formulario de Contacto de Elementor (5 Métodos)

Aplicar CSS a los SVGs

Ahora que sabemos cómo preparar nuestros SVGs para estilizar y animar con CSS, exploremos cuatro formas diferentes de aplicarles CSS.

El primer método es el enfoque de CSS en línea, donde añades estilos de CSS a cualquier parte del SVG mediante el atributo style, de manera similar a como lo harías en HTML.

Dado que SVG se integra perfectamente con HTML, admite estilos de CSS en línea. Aquí tienes un ejemplo que muestra la creación de un icono de suma usando el elemento rect de SVG y algo de CSS:

<svg xmlns="http://www.w3.org/2000/svg" 
     width="64" height="64" 
     viewBox="0 0 48 48">
  <g>
    <!-- 
        Notice the fill color and transformations added 
        to the rectangles below using the inline style 
        attribute.
    -->
    <rect
      width="100%"
      height="8"
      style="fill: navy; 
             transform: translateY(calc(50% - 4px))" />
    <rect
      width="100%"
      height="8"
      style="fill: blue;
             transform-origin: center;
             transform: rotate(90deg) translateY(calc(50% - 4px));" />
  </g>
</svg>

El segundo método para aplicar estilos a un SVG implica el uso de la regla CSS @import. Esta regla se coloca dentro de la etiqueta <style> dentro del SVG para hacer referencia e importar una hoja de estilo CSS externa. Puedes consultar este ejemplo en el repositorio de GitHub para obtener una comprensión más clara, que se parece a algo así como el siguiente código:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(style.css);
  </style>
  ...
</svg>

El próximo enfoque implica escribir estilos directamente dentro del SVG, pero encapsularlos dentro de la sección CDATA es lo mejor para evitar posibles conflictos con el análisis XML:

<svg xmlns="http://www.w3.org/2000/svg" 
     width="64" height="64" 
     viewBox="0 0 48 48">
  <!-- 
    Note that the <style> tag is included within 
    the SVG element, wrapped within the CDATA. 
  -->
  <style type="text/css">
    <![CDATA[
      .bar {
        fill: green;
      }
      .horizontal-bar {
        transform: translateY(calc(50% - 4px));
      }
      .vertical-bar {
        fill: darkgreen;
        transform-origin: center;
        transform: rotate(90deg) translateY(calc(50% - 4px));
      }
    ]]>
  </style>
  <g>
    <rect
      class="bar horizontal-bar"
      width="100%" height="8" />
    <rect
      class="bar vertical-bar"
      width="100%" height="8" />
  </g>
</svg>

El cuarto método implica escribir estilos para archivos SVG en un archivo CSS externo consumido en los documentos que incluyen estos archivos SVG. Como resultado, los SVG se estilan automáticamente según el documento en el que se están utilizando.

Estos cuatro métodos son suficientes para aplicar CSS a los SVG de manera efectiva. Si conoces técnicas adicionales para estilizar SVG con CSS, por favor, menciónalas en los comentarios a continuación.

¿Qué se puede animar con CSS?

CSS te permite crear efectos visuales dinámicos animando varias propiedades. Si bien no todas las propiedades son “animables”, muchas pueden transicionarse o animarse de manera fluida con CSS en SVG.

Vamos a explorar algunas demostraciones que muestran el poder de la animación pura con CSS, que transforma SVG estáticos mediante propiedades como transform, opacity y color. Estas animaciones incorporan matemáticas básicas para crear interruptores de menú dinámicos, animaciones de carga, movimientos fluidos de líneas, ilustraciones animadas y animaciones suaves de texto.

Ícono de menú hamburguesa

Ya hemos explorado el uso del elemento rect de SVG para construir un signo de suma. Ahora, empleemos el mismo elemento para crear un ícono de menú hamburguesa. Este menú se transformará en un ícono de cierre al pasar el ratón sobre él.

Comenzando con la estructura SVG, agregaremos tres elementos rect. El primero representa la barra superior, el segundo la barra central y el último denota la tercera barra del ícono de menú hamburguesa:

<svg xmlns="http://www.w3.org/2000/svg" 
     class="hamburger-icon" 
     width="64" height="64" 
     viewBox="0 0 48 48">
  <rect class="top" 
        x="0" y="0" 
        rx="4" ry="4"
        width="100%" height="8" />
  <rect class="middle" 
        x="0" y="20" 
        rx="4" ry="4"
        width="100%" height="8" />
  <rect class="bottom" 
        x="0" y="40" 
        rx="4" ry="4"
        width="100%" height="8" />
</svg>

Agrupar utilizando la etiqueta <g> no es necesario aquí, ya que solo tenemos barras en el SVG.

Ahora podemos establecer un sistema de coordenadas con el atributo viewBox, proporcionando valores predeterminados para x, y, width y height. Establecemos atributos de width y height para flexibilidad de tamaño, abordando el FOUS. Posicionamos las barras con coordenadas x e y, redondeamos las esquinas con rx y ry, asignamos alturas y utilizamos un ancho del 100%.

Estratégicamente establecemos coordenadas y para distancias de apilamiento iguales. En la sección de CSS, definimos propiedades personalizadas como el tamaño del icono y la altura de la barra:

:root {
  --icon-size: 48;
  --icon-bar-size: 8;
}

Nuestro SVG cuadrado tiene un lado de longitud 64 píxeles. Para la animación del ícono de cierre, establece el origen de la transformación en el centro para las barras superior e inferior para evitar problemas debido a la longitud diagonal.

Traduce las barras a lo largo del eje y para mantener el centrado, ajustando según la altura del elemento. Determina la distancia necesaria de traslación en el eje y y establece una duración de transición:

:root {
  --icon-size: 48;
  --icon-bar-size: 8;
  --icon-translation-size: calc((var(--icon-size) - var(--icon-bar-size)) / 2);
  --icon-transition-duration: 300ms;
}

A continuación, configurar las transiciones y aplicar ease-in-out como la función de transición para las barras del menú mejorará la transición de adentro hacia afuera.

Como se mencionó anteriormente, establecer el origen de la transformación en el centro es crucial. Para ello, debemos establecer la propiedad CSS transform-origin en center para el estado de hover de las barras superior e inferior:

.hamburger-icon rect {
  transition: all var(--icon-transition-duration) ease-in-out;
}

.hamburger-icon:hover .top,
.hamburger-icon:hover .bottom {
  transform-origin: center;
}

Rota la barra superior 45 grados en sentido horario y la barra inferior -45 grados en sentido antihorario. Oculta la barra central estableciendo su opacidad en 0 durante la animación. Podemos aplicar estas transformaciones al estado de hover del shape SVG o a una clase que se pueda activar/desactivar, lograda con la pseudo-clase hover en CSS para mayor simplicidad:

.hamburger-icon:hover .top {
  transform: rotate(45deg)
    translate(0, calc(var(--icon-translation-size) * 1px));
}
.hamburger-icon:hover .bottom {
  transform: rotate(-45deg)
    translate(0, calc(var(--icon-translation-size) * -1px));
}
.hamburger-icon:hover .middle {
  opacity: 0;
}

Una demostración funcional de la explicación anterior se encuentra a continuación. Si deseas probarlo localmente en tu entorno de desarrollo, puedes encontrarlo en el repositorio de GitHub vinculado aquí:

Visita también: 2 herramientas (Widgets) para integrar MINDBODY con tu WORDPRESS

Cargador o indicador giratorio

Crear un anillo giratorio en SVG para pantallas de carga es bastante simple. Configuremos un elemento de círculo con un relleno transparente y un trazo de cuatro píxeles. Luego, alineemos el círculo utilizando las propiedades cx y cy, posicionándolo exactamente en la mitad del tamaño del SVG.

Después, ajustemos el diámetro teniendo en cuenta el ancho del trazo y establezcamos el radio del círculo en la mitad de este diámetro calculado (22) para finalmente representar el círculo como se muestra a continuación:

<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 48 48"  
  width="64" height="64" 
  class="spinner">
    <circle 
      cx="24" cy="24" 
      r="22" 
      fill="transparent" 
      stroke-width="4" />
</svg>

Usando CSS keyframes, rota la animación desde cero hasta 360 grados, creando una rotación completa. Establece la propiedad de animación del elemento SVG mediante CSS, aplicando una operación lineal y bucles infinitos para una duración de un segundo:

:root {
  --spinner-animation-speed: 1s;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin var(--spinner-animation-speed) linear infinite;
}

Para mejorar la animación, utiliza el linearGradient de SVG y los elementos stop para introducir un efecto de degradado. Ajusta valores como x1, x2, y1, y2, stop-color y stop-opacity en el elemento linearGradient para experimentar y crear diversas variaciones de indicadores de carga giratorios:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  id="loading-spinner"
  ...
>
  <defs>
    <linearGradient id="fadeGradient" x1="20%" x2="50%" y1="60%" y2="100%">
      <stop offset="0%" stop-color="#07c" />
      <stop offset="25%" stop-color="#07c" stop-opacity="75%" />
      <stop offset="50%" stop-color="#07c" stop-opacity="50%" />
      <stop offset="75%" stop-color="#07c" stop-opacity="25%" />
      <stop offset="100%" stop-color="#07c" stop-opacity="5%" />
    </linearGradient>
  </defs>
  <circle 
    cx="24" cy="24" 
    r="22" 
    fill="transparent" 
    stroke-width="4" 
    stroke="url(#fadeGradient)" />
</svg>

Asigna una clase a cada elemento stop para un control externo mediante CSS. Utilizando la propiedad stop-color en el CSS externo, administra el color y las configuraciones con propiedades personalizadas.

Aquí tienes el código combinado para una animación de indicador de carga giratorio; el código completo está disponible en este archivo del repositorio de GitHub:

Cargador de barras en morphing

Exploraremos otro cargador con un efecto pulsante mediante la transformación de elementos rectangulares de izquierda a derecha. Utiliza tres elementos rectangulares, cada uno con un ancho de ocho y una altura de 24, separados por una distancia de cuatro, dando como resultado un SVG con un ancho de 32 y una altura de 24:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="64" height="48" 
  viewBox="0 0 32 24"
  class="bars-loader">
  <rect 
    class="morphing-bar morphing-bar-left" 
    width="8" height="24" />
  <rect 
    class="morphing-bar morphing-bar-center" 
    width="8" height="24" x="12" />
  <rect 
    class="morphing-bar morphing-bar-right" 
    width="8" height="24" x="24" />
</svg>

Cada barra comparte la misma animación con diferentes retrasos en la parte de CSS. Comencemos asignando un color de relleno y estableciendo el origen de la transformación en el centro para una animación sincronizada en ambas barras superior e inferior:

.bars-loader .morphing-bar {
  transform-origin: center;
}

Escala cada barra ligeramente por debajo de su altura en el eje y, luego vuelve a la normalidad con un retraso, ciclando indefinidamente. Utiliza una propiedad personalizada para la velocidad de la animación del cargador e introduce retrasos incrementales para cada barra. Divide la velocidad total en valores incrementales para evitar que la animación neta alcance cero:

:root {
  --loader-animation-speed: 0.75s;
}

@keyframes morphingBar {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
}

.bars-loader .morphing-bar {
  transform-origin: center;
  animation: morphingBar var(--loader-animation-speed) ease-in-out infinite;
}

.bars-loader .morphing-bar-left {
  animation-delay: calc(var(--loader-animation-speed) / 2.5);
}

.bars-loader .morphing-bar-center {
  animation-delay: calc(var(--loader-animation-speed) / 5);
}

.bars-loader .morphing-bar-right {
  animation-delay: calc(var(--loader-animation-speed) / 7.5);
}

¡Y eso es todo! An’imate y juega a ajustar los tiempos, colores y funciones de transición para personalizarlo y hacerlo tuyo. Así es como se verá la animación de barras en morphing en tu aplicación:

Creando una animación de dibujo de líneas

Para lograr un efecto de dibujo de líneas en SVG, es importante utilizar eficazmente las propiedades de trazo. Por ejemplo, al trabajar con un ícono de cámara de Tabler Icons, modifiqué sus dimensiones y transferí ciertos atributos, como el ancho de trazo, a CSS para un control y personalización mejorados después de examinar la estructura del ícono.

Ahora, los trazados dependen de las propiedades de trazo animadas por CSS, como stroke-dasharray y stroke-dashoffset, una técnica que cubrí en otro componente de progreso circular alimentado por SVG para React:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="256"
  height="256"
  id="drawable-illustration"
>
  <path d="..."  />
  <path d="..." />
</svg>

El SVG anterior es funcional solo cuando utiliza las siguientes propiedades. Estoy excluyendo elementos con el relleno establecido en “none” utilizando la pseudo-clase :not, ya que estos elementos están destinados principalmente a establecer la ventana gráfica y no son directamente relevantes para la visualización:

:root {
  --illustration-drawing-speed: 2s;
}

#drawable-illustration path:not([fill="none"]) {
  fill: transparent;
  stroke-width: 0.25;
  stroke: currentColor;
}

Antes de continuar, es esencial determinar la longitud de cada trazo o elemento que pretendemos animar. Estos valores son cruciales para utilizar con las propiedades stroke-dasharray y stroke-dashoffset. Aunque podemos proporcionar estimaciones, es preferible utilizar valores precisos que podamos obtener mediante JavaScript e incorporarlos posteriormente en nuestro CSS:

let icon = document.querySelector("#drawable-illustration");

if (icon) {
  let paths = icon.querySelectorAll("path");
  if (paths.length) {
    for ([index, path] of paths.entries()) {
      let pathLength = path.getTotalLength();
      console.log(`Path #${index + 1}: ${pathLength}`);
    }
  }
}

El código JavaScript anterior muestra la longitud de cada trazo individualmente en #animated-icon. La longitud del primer trazo es aproximadamente 62, y la del segundo trazo es aproximadamente 19. Utilizaremos estos valores para configurar las propiedades stroke-dasharray y stroke-dashoffset:

#drawable-illustration path:nth-child(1) {
  stroke-dasharray: 61.9942626953125;
  stroke-dashoffset: 61.9942626953125;
}
#drawable-illustration path:nth-child(2) {
  stroke-dasharray: 18.852230072021484;
  stroke-dashoffset: 18.852230072021484;
}

La propiedad stroke-dasharray define patrones de líneas; las longitudes son 62 guiones y 19 espacios para el primer trazo, y el segundo trazo sigue el mismo patrón. La propiedad stroke-dashoffset establece inicialmente el punto de inicio del patrón a la longitud completa. Al disminuir estas dos propiedades, se desplaza el patrón, creando un efecto de dibujo o revelación.

En la sección de animación, podemos crear un keyframe en CSS para hacer la transición de stroke-dashoffset a 0 para ambos trazos, como se muestra en el siguiente código:

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

#drawable-illustration path:not([fill="none"]) {
  ...
  animation: draw var(--illustration-drawing-speed) forwards;
}

Ahora, establece la dirección de la animación a “forwards“. Encuentra el código completo para esta demostración aquí. Observa el efecto final en la demostración de CodePen a continuación:

Ilustración animada

Elijamos algunas ilustraciones e íconos SVG preexistentes y creemos algo combinándolos. Transformé una ilustración de un polo de hielo en formato PNG de la colección de Cori George en formato SVG utilizando una herramienta en línea.

Luego, incorporé un ícono de gota de Tabler Icons debajo de los trazos SVG del polo de hielo, asignándoles identificadores únicos para la personalización con CSS. Podemos animar estas gotas con cambios de traslación y opacidad mediante CSS. Variando las duraciones de la animación para cada gota, podemos lograr un patrón de caída aleatorio:

:root {
  --p-drop-right-speed: 3.5s;
  --p-drop-left-speed: 2.5s;
}

#popsicle .drop-left
  transform: scale(2);
  opacity: 0;
}

#popsicle .drop-left {
  animation: dropLeft var(--p-drop-left-speed) ease-in-out infinite;
  opacity: 0;
}
#popsicle .drop-right {
  animation: dropRight var(--p-drop-right-speed) ease-in-out infinite;
  opacity: 0;
}

@keyframes drop-left {
  5% {
    transform: translate(450px, 525px) scale(2.5);
    opacity: 1;
  }
  100% {
    transform: translate(450px, 900px) scale(2);
    opacity: 0;
  }
}

@keyframes drop-right {
  5% {
    transform: translate(575px, 415px) scale(2.5);
    opacity: 1;
  }
  100% {
    transform: translate(575px, 900px) scale(2);
    opacity: 0;
  }
}

Echa un vistazo a la demostración funcional en el siguiente CodePen y encuentra el código completo para este ejemplo aquí:

Texto con efecto de desvanecimiento

Otra animación interesante es una animación de texto que se desvanece y aparece, similar al efecto de texto intermitente en HTML con CSS. Usemos el elemento de texto, estilicémoslo con CSS y apliquemos una fuente de Google para un aspecto elevado.

Luego, es fácil configurar una animación de keyframes para alternar la opacidad del texto y lograr una suave animación de texto SVG que se desvanece y aparece, como se muestra en la demostración a continuación:

:root {
  --text-animation-speed: 0.5s;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.blinking-text {
  animation: blink var(--text-animation-speed) ease-in infinite alternate;
}

Otro ejemplo implica animar el texto letra por letra con efecto de desvanecimiento usando elementos tspan de SVG dentro del elemento de texto. Cada tspan se puede dirigir para diferentes animaciones con retrasos. Observa el SVG modificado a continuación para este cambio:

<svg width="500" height="120" class="blinking-chars">
  <text text-anchor="middle" x="50%" y="50%" class="blinking-chars-group">
    <tspan class="char" dy="0">H</tspan>
    <tspan class="char" dy="0">e</tspan>
    <tspan class="char" dy="0">l</tspan>
    <tspan class="char" dy="0">l</tspan>
    <tspan class="char" dy="0">o</tspan>
  </text>
</svg>

Aplica el efecto de desvanecimiento para cada carácter con una animación de keyframes en CSS, animando cada tspan desde una opacidad del 0% al 100%. Organiza estableciendo una propiedad personalizada para la velocidad de la animación, asignando incrementalmente a cada carácter una porción de esa velocidad. Observa el código a continuación para la configuración en CSS:

:root {
  --text-animation-speed: 1s;
}

.blinking-chars-group .char {
  animation: blink var(--text-animation-speed) infinite alternate;
  opacity: 0;
}
.blinking-chars .char:nth-child(1) {
  animation-delay: calc(var(--text-animation-speed) * 0);
}
.blinking-chars .char:nth-child(2) {
  animation-delay: calc(var(--text-animation-speed) * 0.2);
}
.blinking-chars .char:nth-child(3) {
  animation-delay: calc(var(--text-animation-speed) * 0.4);
}
.blinking-chars .char:nth-child(4) {
  animation-delay: calc(var(--text-animation-speed) * 0.6);
}
.blinking-chars .char:nth-child(5) {
  animation-delay: calc(var(--text-animation-speed) * 0.8);
}

La opacidad inicial para cada tspan se establece en 0%, y luego podemos agregar un retraso estratégico de animación para cada tspan con una dirección alternante. Esto hace que la transición de opacidad sea más suave, yendo de 0 a 1 y luego de 1 a 0:

Encuentra el código completo para este ejemplo aquí en el repositorio de GitHub. Para tales animaciones, ten en cuenta la cantidad de caracteres en la cadena de texto para configurar el CSS adecuadamente. Aunque esto se puede lograr de manera más eficiente con JavaScript, está fuera del alcance de este tutorial.

Texto ondulado en SVG

La última demostración que exploraremos es una animación de texto ondulado que se asemeja a un efecto de texto saltarín. A diferencia de la animación de desvanecimiento, esto implica trasladar cada letra hacia arriba y hacia abajo, lo que requiere elementos de texto separados porque tspan no admite transformaciones.

Aunque usar un elemento de texto por letra no es ideal para el posicionamiento, para la demostración utilizaremos elementos de texto, los envolveremos en un grupo y asumiremos posiciones, como se muestra a continuación:

<svg ...>
  <g>
    <text y="50%" class="char">
      H
    </text>
    <text y="50%" x="20%" class="char">
      e
    </text>
    <text y="50%" x="40%" class="char">
      l
    </text>
    <text y="50%" x="60%" class="char">
      l
    </text>
    <text y="50%" x="80%" class="char">
      o
    </text>
  </g>
</svg>

Hemos hecho que el texto se mueva hacia arriba en ciertos intervalos y lo hemos bajado en otros, creando un efecto ondulado:

Al tomar este enfoque, hemos intercambiado la alineación automática de caracteres proporcionada por tspan por la alineación manual de cada carácter utilizando el atributo x, lo cual no es muy eficiente. Efectos como este requieren una solución o herramienta más efectiva, algunas de las cuales se discuten en la siguiente sección.

Más herramientas para animar SVG

Animar SVG solo con CSS tiene limitaciones, como la incapacidad de contar dinámicamente elementos y configurar CSS en consecuencia. Para superar estos desafíos y crear animaciones más avanzadas para formas SVG complejas, varias herramientas simplifican significativamente el proceso:

• SVG.js: Una biblioteca liviana de JavaScript para manipular y animar SVG.
• Vivus.js: Una clase de JavaScript sin dependencias que permite la animación de SVG, creando un efecto dibujado similar a lo que cubrimos en la sección de animación de líneas.
• mo.js: Dirigido a gráficos en movimiento en la web, ofrece animaciones rápidas y robustas a través de su API, y lo mejor de todo es que es de código abierto.
• Framer Motion: Una biblioteca de animación lista para producción para React con una sintaxis declarativa, un increíble proyecto de código abierto para animaciones SVG.
• Animate.css: Una colección de animaciones CSS predefinidas que puedes copiar y pegar en tu flujo de trabajo para aplicar diferentes efectos a tus SVG.
• GSAP: Proporciona acceso premium para animar casi todo lo que puedas seleccionar con JavaScript.
• SVGator: Otra herramienta de pago que simplifica la tarea de animar SVG a través de su interfaz de usuario, permitiéndote importar, animar y exportar la salida.

Conclusión

Ahora que has explorado diversas formas de animar SVG con CSS, ¡espero que te sientas inspirado/a para crear tus propias animaciones web! Es divertido dar vida a SVG estáticos con solo un poco de CSS.

Una vez que te familiarices con algunas técnicas, abordar animaciones más complejas será más fácil. Puedes encontrar inspiración interminable en línea, especialmente en sitios como CodePen. Para comenzar, explora la colección de CodePen con ejemplos cubiertos en este tutorial. ¡Diviértete animando!