Morphing y filtros SVG: el efecto gooey

Dos efectos que parecen sacados de un estudio de motion graphics: el MORPHING, donde una forma se derrite en otra (el icono de play que fluye a pausa), y los FILTROS SVG, con los que se logra el famoso "gooey" — formas que se funden como gotas de mercurio. Son el techo técnico del módulo; hoy entiendes cómo funcionan y cuándo valen la pena.

Morphing: una forma que se derrite en otra

En CSS moderno, d es una propiedad animable: defines el path de destino y transicionas hacia él.

Nota honesta de soporte, importante: animar d con CSS funciona en navegadores basados en Chromium y llega al resto de forma despareja — no lo uses aún para algo crítico sin verificar en caniuse. Para morphing serio y cross-browser, la herramienta profesional es el plugin MorphSVG de GSAP (módulo 16), que además resuelve solo el problema de igualar los puntos entre formas distintas. Aquí lo importante es entender el mecanismo y su condición; el "cómo" robusto llega con GSAP.

Filtros SVG: procesar el dibujo como en Photoshop

Un <filter> toma tu dibujo y lo pasa por una cadena de operaciones — desenfoque, cambios de color, sombras, iluminación — como las capas de ajuste de un editor de foto, pero en vivo y vectorial. La estrella es el efecto gooey (pegajoso), y sale de combinar solo dos filtros:

<svg viewBox="0 0 300 160" width="100%" style="max-width:460px">
<defs>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"/>
    <feColorMatrix in="blur" mode="matrix"
      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo"/>
  </filter>
</defs>
<g filter="url(#gooey)" fill="#6d28d9">
  <circle cx="150" cy="80" r="30"/>
  <circle class="orbita" cx="150" cy="80" r="22"/>
</g>
</svg>
<p class="nota">Los dos círculos son formas separadas, pero el filtro gooey los funde con un puente líquido cuando se acercan. Cero JavaScript.</p>

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
svg { background: white; border: 1px solid #e2e8f0; border-radius: 12px; }
.orbita { transform-box: fill-box; transform-origin: center; animation: vaiven 3.5s ease-in-out infinite; }
@keyframes vaiven {
0%, 100% { transform: translateX(-60px); }
50% { transform: translateX(60px); }
}
@media (prefers-reduced-motion: reduce) { .orbita { animation: none; transform: translateX(45px); } }
.nota { font-size: 13px; color: #64748b; margin-top: 14px; max-width: 54ch; }

Esos números del feColorMatrix parecen brujería — son una matriz que transforma los canales de color. El único que importa para gooey es el penúltimo grupo (0 0 0 18 -8): multiplica el alfa por 18 y le resta 8, lo que "endurece" el desenfoque a un borde definido. Se copian tal cual de cualquier receta gooey; ajustas el stdDeviation del blur y ese 18 para más o menos "pegajosidad". Otros filtros útiles que verás: feDropShadow (sombras vectoriales reales), feTurbulence (texturas y ruido) y feDisplacementMap (distorsiones tipo agua).

Mini-reto

Copia el filtro gooey del ejemplo a un SVG nuevo y juega con dos números: sube el stdDeviation a 12 (más fusión, más blando) y baja el 18 del alfa a 10 (bordes más difusos). Encuentra la combinación que te guste para un menú de botones flotantes tipo "burbujas de mercurio". No entiendas la matriz entera — domina las dos perillas que la controlan.

Qué sigue

Tienes el arsenal SVG completo: dibujar, limpiar, y animar de todas las formas. El reto del módulo lo pone a prueba con el ejercicio más satisfactorio del curso hasta ahora: tomar el logo de una marca que conoces, vectorizarlo con tus propias manos y hacer que se dibuje solo en pantalla. Tu firma como diseñador-desarrollador.