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

Reto: vectoriza un logo y hazlo dibujarse solo

Reto65 min100 XP

El examen del módulo junta todo: mirar un logo, descomponerlo en formas, escribirlo como SVG con tus manos y hacer que se dibuje solo en pantalla. Es el ejercicio que más te va a enorgullecer del curso hasta ahora — porque el resultado se ve profesional y lo hiciste TÚ, coordenada por coordenada.

Reto

Tu logo, dibujándose solo

Difícil60 min100 XP(×2 sin mirar la solución)

Qué debes construir

Elige un logo de formas simples (tuyo, de una marca que te guste, o inventa uno), vectorízalo a mano y anímalo para que se trace solo al cargar. Un ejemplo de referencia — la marca ficticia "Vértice":

<div class="marco">
<svg viewBox="0 0 100 100" width="170" height="170" role="img" aria-label="Logo de Vértice: un sol sobre una cordillera dentro de un marco redondeado">
  <rect class="trazo marco-logo" pathLength="1" x="12" y="12" width="76" height="76" rx="16" fill="none" stroke="#a78bfa" stroke-width="3"/>
  <circle class="trazo sol" pathLength="1" cx="50" cy="36" r="8" fill="none" stroke="#f59e0b" stroke-width="3"/>
  <path class="trazo montana" pathLength="1" d="M 24 74 L 40 48 L 52 62 L 64 42 L 78 74" fill="none" stroke="#6d28d9" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="nota">Marco → sol → cordillera, en secuencia. Tres formas que se dibujan solas con un pequeño desfase entre ellas.</p>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.marco { display: grid; place-items: center; }
svg { background: white; border: 1px solid #e2e8f0; border-radius: 18px; padding: 10px; }
.trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.marco-logo { animation: trazar 4s ease-in-out infinite; }
.sol { animation: trazar 4s ease-in-out 0.6s infinite; }
.montana { animation: trazar 4s ease-in-out 1.1s infinite; }
@keyframes trazar {
0% { stroke-dashoffset: 1; }
35%, 70% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 1; }
}
@media (prefers-reduced-motion: reduce) {
.trazo { animation: none; stroke-dashoffset: 0; }
}
.nota { font-size: 13px; color: #64748b; margin-top: 14px; max-width: 52ch; }

Requisitos:

Vectorizado a mano: el SVG lo escribes tú (primitivas y/o <path>), con un viewBox limpio. Nada de pegar un export sin entenderlo — el punto es que domines cada coordenada.
Mínimo 3 elementos que se dibujen, con pathLength="1" para no calcular longitudes.
Trazado escalonado: los elementos se dibujan en secuencia (staggering con animation-delay), no todos a la vez.
Accesible: el <svg> con role="img" y un aria-label que describa el logo (un lector de pantalla no ve el dibujo).
Reduced-motion: sin animación, el logo queda COMPLETAMENTE dibujado y visible — nunca invisible.

Reglas

SVG inline + CSS. Cero imágenes, cero JavaScript.
Colores de la casa o los de tu marca, con contraste suficiente sobre el fondo.
Formas de contorno (fill="none" + stroke): el efecto se dibuja sobre el TRAZO, así que el logo debe poder expresarse como líneas. Un logo puramente relleno no se "dibuja" con esta técnica (nota honesta abajo).

60:00

Cuando estés listo, arranca el reloj.

El razonamiento — el reto se gana en el análisis, no en el CSS:

Descomponer es diseñar. El logo "Vértice" son tres primitivas honestas: un rect redondeado (el marco), un circle (el sol) y un path de cuatro segmentos L (la cordillera). Ninguna curva Bézier, ningún comando exótico — porque elegí un logo que se PUEDE expresar con lo básico. Media victoria es elegir/diseñar algo vectorizable a tu nivel.
pathLength="1" unifica todo. El marco mide cientos de unidades de perímetro, el sol otras tantas, la cordillera otras — pero con pathLength="1" los tres se animan con stroke-dasharray: 1 idéntico. Sin ese atajo, tendrías que medir tres longitudes distintas a mano.
El escalonado cuenta una historia. Marco (0s) → sol (0.6s) → cordillera (1.1s): el ojo construye el logo en orden, como lo dibujaría una mano. Es el staggering del módulo 11 aplicado a trazos — mismo @keyframes trazar, tres delays.

logo.css

En producción usarías forwards sin infinite (se dibuja una vez al cargar y se queda); el loop es para poder estudiarlo aquí.

Autoevaluación: ¿escribiste tú cada coordenada (aunque sea fea)? ¿Los tres elementos se dibujan en secuencia y no de golpe? ¿El aria-label describe el logo a quien no lo ve? ¿Con reduced-motion el logo se ve COMPLETO? Cuatro síes: vectorizaste y animaste tu primer logo de verdad.

Nota honesta para cerrar: esta técnica dibuja CONTORNOS. Un logo de relleno macizo (un cuadrado sólido, una silueta rellena) no se "traza" — para esos, el efecto profesional es un clip-path que se expande o una máscara animada, o directamente GSAP DrawSVG (módulo 16). Si tu logo es de relleno, dale al menos un contorno que se dibuje, o cambia de logo: saber qué técnica pide cada logo ES parte de la habilidad.

Qué sigue

Módulo 12 cerrado: dibujas y animas vectores como un diseñador-desarrollador completo. El módulo 13 cambia radicalmente de herramienta y de mentalidad: del vector nítido e infinito al PÍXEL y al fotograma. Canvas, el game loop y tu primer videojuego 2D desde cero — la parte más divertida del curso te está esperando.