Animaciones SVG

SVG es un formato de imagen hecho de código: cada línea, círculo o forma es un elemento que puedes seleccionar con CSS y animar. Por eso es la base de logos animados, iconos interactivos e ilustraciones que "se dibujan solas".

Concepto: stroke-dasharray y stroke-dashoffset

El efecto de "dibujo a mano" se basa en un truco con las líneas discontinuas:

1. stroke-dasharray convierte el trazo en guiones. Si el guion mide lo mismo que todo el trazado, se ve una línea completa.
2. stroke-dashoffset desplaza dónde empieza el guion. Si lo desplazas toda la longitud, el trazo queda oculto (sólo se ve el hueco).
3. Animar stroke-dashoffset de la longitud total a 0 hace que la línea se "dibuje".

<!-- pathLength="1" normaliza la longitud de cualquier trazado a 1 -->
<path class="linea" pathLength="1" d="M10 50 L50 15 L90 50" />

.linea {
  fill: none; stroke: #22d3ee; stroke-width: 3;
  stroke-dasharray: 1;      /* un guion del largo completo */
  stroke-dashoffset: 1;     /* desplazado: invisible */
  animation: dibujar 3s ease-in-out forwards;
}
@keyframes dibujar { to { stroke-dashoffset: 0; } }

El truco de pathLength="1"

Sin este atributo tendrías que medir cada trazado con path.getTotalLength() en JavaScript y usar ese número. Con pathLength="1" cualquier forma mide "1" y el mismo CSS sirve para todas.

Dibujo de línea

Una casa y una estrella que se dibujan y luego se rellenan, y una firma que se dibuja y se borra en bucle.

Dibujo con stroke-dashoffset

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Detalles:

• El relleno es un trazado aparte que aparece con opacity cuando termina el trazo (animation-delay igual a la duración del dibujo).
• La firma anima stroke-dashoffset de 1 a 0 (dibuja) y luego a -1 (borra desde el inicio), en bucle.
• stroke-linecap: round y stroke-linejoin: round dan un acabado más natural, como de bolígrafo.

Morphing (transformar una forma en otra)

Un blob orgánico que cambia de forma sin parar y un botón play que se transforma en pausa.

Morphing con la propiedad d

✏️ Editar en el Playground↗ Abrir en pestaña nueva

En CSS moderno, el atributo d de un <path> es también una propiedad CSS que se puede animar:

.blob {
  d: path("M100 20 C145 20 180 55 180 100 C180 145 …Z");
  animation: morph 6s ease-in-out infinite;
}
@keyframes morph {
  50% { d: path("M110 30 C150 15 190 70 170 110 C160 160 …Z"); }
}

Requisito para que el morph funcione

Ambos trazados deben tener el mismo número y tipo de comandos (por ejemplo: M + 4 curvas C + Z). Si no coinciden, el navegador salta de una forma a otra sin animar. Por eso el icono de play está hecho con dos cuadriláteros (dos mitades del triángulo) que se convierten en las dos barras de la pausa.

Soporte y alternativas

Animar d con CSS funciona en Chrome, Edge y Firefox; en navegadores sin soporte el icono cambia de forma sin transición (sigue funcionando). Para morphs complejos entre formas con distinto número de puntos, usa librerías como GSAP MorphSVG o flubber.

Logo animado

Una secuencia completa: el hexágono se dibuja, las piezas entran girando una tras otra, el punto central late y el nombre se revela de izquierda a derecha. Al pasar el mouse, el logo da una vuelta. Pulsa ↻ en la barra para repetirlo.

Logo SVG con secuencia de animaciones

✏️ Editar en el Playground↗ Abrir en pestaña nueva

La clave: coreografía con animation-delay. Cada parte empieza cuando la anterior está terminando:

Tiempo	Qué pasa
0 – 1.2 s	El hexágono se dibuja
1.0 – 1.9 s	Las 3 piezas entran (con 150 ms entre cada una)
1.7 – 2.6 s	El nombre se revela con clip-path
1.8 s en adelante	El punto central late en bucle

Otro detalle importante:

.logo * { transform-box: fill-box; transform-origin: center; }

Por defecto, los elementos SVG giran y escalan respecto a la esquina superior izquierda del SVG completo. transform-box: fill-box hace que transform-origin: center se refiera al centro de cada pieza.

¿SVG, Lottie o video?

• SVG + CSS: logos, iconos y animaciones sencillas. Ligero y editable.
• Lottie: animaciones complejas creadas por un diseñador en After Effects y exportadas a JSON.
• Video: animaciones fotorrealistas o muy largas.

Ejercicios

1. Dibuja tu inicial con un <path> y anímala con stroke-dashoffset.
2. Cambia la firma para que se dibuje en 2 s y espere 3 s antes de borrarse.
3. Haz que el logo se anime de nuevo cada vez que se pasa el mouse por encima (pista: anima las piezas en :hover).

Ver solución del ejercicio 2

.firma .linea { animation: firma 5s ease-in-out infinite; }
@keyframes firma {
  0%       { stroke-dashoffset: 1; }
  40%, 80% { stroke-dashoffset: 0; }   /* 2 s dibujando, 2 s quieta */
  100%     { stroke-dashoffset: -1; }
}

Resumen

• Dibujo de líneas: stroke-dasharray + stroke-dashoffset animado, con pathLength="1".
• Morphing con CSS: la propiedad d: path(), con trazados de igual estructura.
• transform-box: fill-box para girar/escalar piezas SVG desde su propio centro.
• Coreografía = encadenar animation-delay para contar una pequeña historia.