Ir al contenido
Tiempo limitadoStarter ahora cuesta 9 US$ al mes en lugar de 20 US$.Ver planes
charmotion
Empieza ahora

Animación de dibujo de logo SVG: cómo funciona el trazo que se revela

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Animación de dibujo de logo SVG: cómo funciona el trazo que se revela, con personajes de demo de Charmotion

Una animación de dibujo de logo SVG define el stroke-dasharray de cada trazado con la longitud del trazado, desplaza el guion en esa misma cantidad para que la línea empiece oculta y luego anima stroke-dashoffset hasta 0. Obtén la longitud con getTotalLength() o define pathLength="1" en el trazado. Los logos con relleno necesitan una máscara con trazo, o un relleno que aparezca con fundido después de la línea.

Puntos clave

  • El efecto es un solo guion tan largo como el trazado, que entra en la vista animando stroke-dashoffset.
  • pathLength="1" permite que CSS simple use los mismos valores para todos los trazados; getTotalLength() da longitudes reales para una velocidad constante.
  • Solo funciona con trazos. Los logos con relleno, el texto convertido en contornos y las exportaciones de Figma a menudo no tienen trazos que dibujar.
  • Para arte con relleno, anima un trazo blanco grueso dentro de una máscara SVG sobre las formas reales.
  • Usa Trim Path de Lottie o Rive cuando el mismo reveal también deba funcionar en apps de iOS o Android.

¿Ya tienes un personaje o logo? Mira ejemplos en pantallas reales de apps: pantallas de splash, onboarding, carga y estado vacío, con la animación que se reproduce en cada una.

¿Cómo funciona el efecto de dibujo de líneas en SVG?

Es un truco con guiones. stroke-dasharray define "el patrón de guiones y espacios usado para pintar el contorno de la forma." stroke-dashoffset define "un desplazamiento en el renderizado del dash array asociado." Ambos son animables y ambos funcionan como propiedades CSS.

  1. Haz un guion exactamente tan largo como el trazado, seguido de un espacio de la misma longitud.
  2. Desplaza el patrón la longitud completa, para que el espacio cubra el trazado y no se vea nada.
  3. Anima el desplazamiento de vuelta a 0. El guion se desliza por el trazado y la línea parece dibujarse sola.

La explicación clásica de CSS-Tricks pone primero el requisito: "La forma debe tener un trazo." Todo lo que sigue se deriva de eso.

¿Cuál es el código más simple para una animación de dibujo de logo SVG?

Define pathLength="1" en cada trazado. MDN explica que el navegador entonces escala las distancias para que stroke-dasharray "asuma que el inicio del trazado es 0 y el punto final es el valor definido en el atributo pathLength." Cada trazado pasa a medir 1 unidad, así que una sola regla CSS sirve para todos.

<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <path class="draw" pathLength="1" d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
</svg>

.draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s ease-in-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
}

forwards importa: animation-fill-mode: forwards conserva "los valores calculados definidos por el último keyframe," así que el logo queda dibujado cuando termina la animación. La regla de movimiento reducido muestra el logo terminado de inmediato.

Si prefieres longitudes reales, mídelas en JavaScript. getTotalLength() devuelve "la longitud total del trazado en unidades de usuario":

document.querySelectorAll(".draw").forEach((path, i) => {
  const len = path.getTotalLength();
  path.style.strokeDasharray = len;
  path.animate(
    [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
    { duration: 1200, delay: i * 150, easing: "ease-in-out", fill: "forwards" }
  );
});

¿Deberías usar CSS, SMIL o JavaScript para el efecto de dibujo?

CSSSMIL (<animate>)JavaScript
Dónde viveTu hoja de estilos o un <style> dentro del SVGEl propio archivo SVGEl script de tu página
Movimiento reducidoUna media query en el mismo archivoPosible con un <style> de respaldo; planéalo explícitamenteComprueba matchMedia antes de empezar
Empezar al hacer scroll o clicActivar o desactivar una claseIncómodoNatural
Escalonar según la longitud realRetrasos manualesManualFácil con getTotalLength()

SMIL es el elemento <animate>, que "ofrece una forma de animar un atributo de un elemento a lo largo del tiempo." MDN lo marca como Baseline ampliamente disponible. Usa attributeName="stroke-dashoffset", from="1", to="0" y fill="freeze" para conservar el estado final.

Dónde vive el SVG también decide el método. Usado como <img>, MDN dice que algunos navegadores desactivan el JavaScript dentro de él y bloquean las hojas de estilos externas, así que la animación debe escribirse dentro del archivo SVG. Un SVG inline en tu HTML puede usar los tres. Para empezar el dibujo cuando el logo entra en la vista al hacer scroll, la API Intersection Observer es la herramienta estándar; la Web Animations API (element.animate()) te permite reproducir, pausar y reiniciar desde un script.

¿Cómo animas el dibujo de un logo con relleno?

La mayoría de los logos son formas con relleno, no líneas, así que el truco del guion no tiene nada que dibujar. Tres formas de resolverlo:

  1. Contorno y luego relleno. Dale a las formas con relleno un trazo temporal, dibuja ese contorno y luego haz aparecer el relleno con un fundido. Rápido y convincente para símbolos gruesos.
  2. Reveal con máscara. Dibuja un trazado central simple que recorra el logo, con un trazo lo bastante ancho para cubrirlo, dentro de una <mask>. En una máscara de luminancia, el ejemplo de MDN señala que "todo lo que esté bajo un píxel blanco será visible," así que a medida que se dibuja el trazo blanco, el logo real con relleno aparece debajo. Tu arte nunca se modifica.
  3. Barrido. Un <clipPath> "restringe la región a la que se puede aplicar pintura." Anima un rectángulo dentro de él para revelar el logo con un barrido desde un lado. No parece dibujado a mano, pero funciona con cualquier arte.
<svg viewBox="0 0 200 60" role="img" aria-label="Offscript">
  <mask id="reveal">
    <path class="draw" pathLength="1" stroke="white" stroke-width="14"
          d="M10 45 C40 5, 70 5, 100 40 S160 75, 190 15" />
  </mask>
  <g mask="url(#reveal)">
    <!-- your filled logo paths, unchanged -->
  </g>
</svg>

El mismo CSS .draw de arriba anima el trazado de la máscara. Dibuja la línea central en el orden en que se movería un lápiz, porque ese es el orden en que aparece el logo.

¿Cómo exportas un logo desde Figma o Illustrator para una animación de dibujo?

Revisa lo que realmente contiene la exportación. La ayuda de Figma incluye "Figma exporta los trazos como rellenos" entre sus notas de exportación SVG, y dice que "SVG solo admite el trazo centrado," con un ajuste Simplify stroke para trazos interiores y exteriores. Su opción Outline text "convierte cualquier capa de texto en glifos," que son formas con relleno. Cualquiera de estas cosas puede dejarte sin trazo que animar.

  • Abre el SVG en un editor de texto. Un trazado dibujable tiene stroke definido y fill="none". Un trazado que solo tiene fill es una forma; usa el método de la máscara.
  • Dibuja las líneas como trazos centrados en todo lo que deba dibujarse, como una firma o un símbolo monolínea.
  • Ponles nombre a las capas. La opción Include "id" attribute de Figma agrega ids basados en los nombres de las capas, que tu CSS o tu script pueden usar como objetivo.
  • Illustrator: la misma comprobación se aplica a su exportación SVG. Si los trazados salen como contornos con relleno, reconstruye las partes dibujadas como trazados abiertos con trazo antes de exportar.

¿Cómo dibujas en secuencia un logo con varios trazados?

Retrasa cada trazado para que el dibujo pase de un trazo al siguiente, como lo haría una mano.

  • Misma duración por trazado: con pathLength="1", cada trazado tarda lo mismo sin importar su longitud. Es simple, pero un trazo corto y un trazo largo terminan a la vez, así que el corto parece lento.
  • Velocidad de lápiz constante: mide cada trazado con getTotalLength() y haz que su duración sea proporcional a su longitud, empezando cada uno cuando termina el anterior.
  • Superpón un poco: empezar el siguiente trazo un poco antes de que termine el anterior se ve más fluido que una cola estricta.
  • Termina con el relleno: haz aparecer los rellenos y colores con un fundido después del último trazo para que el logo termine exactamente como fue diseñado.

Un reveal que se reproduce una vez en un par de segundos está muy por debajo del umbral de cinco segundos de WCAG 2.2.2 para movimiento automático. Un dibujo que se repite en loop sin fin no lo está, así que dale al loop una forma de detenerse.

¿Cuándo deberías usar Lottie o Rive en lugar de SVG y CSS?

Cuando el reveal tiene que funcionar fuera del navegador, o hacer algo más que dibujar.

  • Lottie: la tabla de funciones compatibles de Lottie indica Trim Path (individually) como compatible en Android, iOS y Web. Trim Path aplicado de forma simultánea no es compatible con el renderer Core Animation de iOS.
  • Rive: Trim Path te permite "dibujar solo una parte del trazo en una forma vectorial," con Start, End y Offset, y un modo Sequential que dibuja los trazados uno tras otro. Luego un archivo de Rive puede pasar a una máquina de estados: dibujarse, quedar en reposo, reaccionar al hover.

Quédate con SVG y CSS cuando el logo solo aparece en la web, el movimiento es un solo dibujo y quieres cero dependencias. Cambia cuando la misma animación deba incluirse en una app de iOS o Android, o cuando necesite estados. Comparaciones: Lottie vs animación SVG y CSS y SVG a Rive.

¿Puedes tener un reveal de logo escrito a mano sin programarlo?

Motion Studio de Charmotion separa un logotipo plano en sus letras, para que puedan escribirse con un lápiz, subir desde una misma línea base o caer y rebotar, como en la demo de Offscript. Las letras vienen de tu archivo y nunca se cambian por una fuente. Una animación de inicio viene como un .riv con código para web, SwiftUI, Android, Flutter y React Native, más MP4 y video con fondo transparente. Los conceptos son gratis; generar uno empieza en Starter ($9/mes a noviembre de 2026).

Cómo hacer que un logo SVG se dibuje solo

  1. Revisa los trazados. Abre el SVG y confirma que las partes a dibujar son trazados con stroke definido y fill en none.
  2. Normaliza la longitud. Agrega pathLength="1" a cada trazado, o mide cada uno con getTotalLength().
  3. Oculta la línea. Define stroke-dasharray y stroke-dashoffset con la longitud del trazado para que el trazo empiece oculto.
  4. Anima el desplazamiento. Anima stroke-dashoffset hasta 0 con fill mode forwards, escalonando los trazados en el orden de dibujo.
  5. Resuelve el arte con relleno. Para logos con relleno, pon un trazo central blanco y grueso en una máscara sobre las formas reales y anima ese trazo.
  6. Respeta el movimiento reducido. Con prefers-reduced-motion, omite la animación y muestra el logo terminado.

Preguntas frecuentes

¿Por qué mi animación de dibujo SVG no hace nada en mi logo?

Normalmente porque el logo no tiene trazos. Los logos exportados, el texto convertido en contornos y muchas exportaciones de Figma son formas con relleno, así que animar stroke-dashoffset no cambia nada visible. Abre el SVG y busca stroke en los trazados. Si solo hay fill, usa el método de la máscara o agrega un trazo de contorno temporal.

¿Necesito JavaScript para una animación de líneas SVG?

No. Definir pathLength="1" en cada trazado permite que CSS simple use stroke-dasharray: 1 y anime stroke-dashoffset de 1 a 0. JavaScript ayuda cuando quieres una velocidad de dibujo constante entre trazados de distintas longitudes, o para empezar la animación al hacer scroll o clic.

¿La animación de dibujo funciona si el SVG se usa en una etiqueta img?

Solo si la animación está dentro del archivo SVG. MDN señala que los navegadores pueden desactivar JavaScript y bloquear hojas de estilos externas para un SVG usado como imagen, así que pon el CSS en un elemento style dentro del SVG, o usa SMIL, y prueba en los navegadores que soportas.

Fuentes

Guías relacionadas