CodeForge

Maquetación Web Dinámica / SVG: dibujar y animar vectores

Logos que se dibujan solos: stroke-dasharray animado

Teoría20 min20 XP

Es el efecto que hace que la gente se quede mirando: un logo, una firma, un trazo que aparece dibujándose solo, como una mano invisible con plumón. Detrás no hay magia ni JavaScript — hay dos propiedades del contorno y una idea ingeniosa. Al terminar esta lección lo montas en cualquier SVG con <path>.

El truco de la línea de puntos gigante

Dos propiedades, dos trabajos:

  • stroke-dasharray: define el patrón de guiones del contorno. stroke-dasharray: 10 8 = 10 de raya, 8 de hueco, repetido. Si lo haces del largo TOTAL del trazo, es un guion único que llena todo.
  • stroke-dashoffset: desplaza ese patrón a lo largo del trazo. Con el offset en el largo total, el guion queda empujado fuera de vista; animarlo hacia 0 lo trae de vuelta, dibujando.

pathLength: el atajo que evita las matemáticas

El obstáculo clásico es saber cuánto MIDE un path curvo para poner esos números. La solución elegante: pathLength="1" le dice al navegador "trata la longitud de este trazo como si fuera 1, sin importar su medida real". Ahora todo es en fracciones:

dibujar.html

Con pathLength="1", stroke-dasharray: 1 es siempre "un guion tan largo como el trazo", sea un check o una firma de mil curvas. Cambias el dibujo y no tocas la animación. Es el patrón que verás en todos los tutoriales serios.

El logo animado, en vivo

Fíjate en dos decisiones: el check arranca con 0.5s de delay para que el anillo lo enmarque primero (staggering del módulo 11, aplicado a trazos), y el @keyframes va de offset 1 → 0 → 1 para un loop perfecto (dibuja, mantiene, desdibuja). Y lo innegociable: con reduced-motion la animación se apaga y el stroke-dashoffset: 0 deja el logo DIBUJADO y visible — jamás un logo invisible para quien no tolera el movimiento. Misma filosofía que el backwards del módulo 11: el estado "oculto" nunca puede quedar como default.

Montaste el self-drawing pero, con o sin animación, el trazo se ve completo desde el inicio y nunca 'se dibuja'. ¿La causa más probable?

Mini-reto

Ponle a "El Observador" un logo que se dibuje al cargar: un path simple (las iniciales del periódico, o un icono de pluma) con pathLength="1", la animación dibujar una sola vez (forwards, sin infinite) y su reduced-motion dejándolo visible. Si no tienes un path a mano, vectoriza una inicial con dos o tres comandos L — no tiene que ser bonita, tiene que dibujarse.

Qué sigue

Un trazo que se dibuja es solo el comienzo. La próxima lección abre el cofre completo de la animación SVG con CSS: partes que giran sobre su eje, gradientes que fluyen, iconos que se transforman al hacer hover. Todo tu arsenal del módulo 10 y 11, ahora sobre vectores.