Componentes de SVG Animations

Componentes de SVG Animations listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• ShapeMorph — Una forma SVG se transforma suavemente en otra en bucle: círculo, estrella, flor y blob orgánico encadenados. Cada forma comparte el mismo nº de puntos, así que la transición es un morph limpio punto a punto. Pura SVG, sin librerías de morphing.
• MotionPath — Un marcador recorre un trazado SVG cerrado y rota para mirar siempre en la dirección de la marcha (su tangente). La orientación se deriva de la geometría real del path, así que encaja en cualquier curva. Pura SVG, sin librerías de animación.
• DashArrow — Un icono de line-art (flecha, subrayado o círculo) trazado con stroke discontinuo que se anima en bucle: efecto 'marching ants' (el dashoffset corre sin fin) más un barrido draw-on al montar. Trazo redondeado. Auto-anima sin interacción; respeta prefers-reduced-motion mostrando el trazo continuo y estático.
• TextClip — Texto grande y bold (por defecto "UI UX LIBRARY") usado como clip/máscara sobre un relleno de gradiente lineal multicolor en movimiento, visible solo dentro de las letras (background-clip: text). Auto-anima en bucle sin costuras; respeta prefers-reduced-motion mostrando el gradiente estático dentro de las letras.
• TextPath — Texto en bucle que sigue un path curvo (onda, arco o círculo) con <textPath> y fluye a lo largo de él animando el startOffset — las letras giran para seguir la tangente de la curva. Repetición automática para cubrir todo el trazado y bucle sin salto. Tres formas, velocidad y tipografía configurables. Respeta prefers-reduced-motion (texto quieto sobre el path).
• LiquidWarp — Texto grande distorsionado por un feTurbulence + feDisplacementMap animado por rAF: un warp líquido / heat-haze continuo sobre las letras. Auto-anima en bucle; con prefers-reduced-motion el texto queda nítido y sin warp.
• RoughBox — Marco dibujado a mano: un recuadro alrededor de tu texto cuyo borde tiembla como trazado con tiza (filtro SVG feTurbulence + feDisplacementMap con semilla animada). El texto va nítido dentro. Respeta prefers-reduced-motion (borde rugoso pero quieto).
• MorphBlob — Blob orgánico grande que muta su forma en continuo: una mancha líquida viva cuya silueta respira interpolando entre formas-blob generadas con senos inconmensurables (Catmull-Rom → Bézier, rAF). Relleno con gradiente de dos colores. Auto-anima en bucle sin interacción y respeta prefers-reduced-motion (forma fija). Ideal como fondo hero, avatar decorativo o acento de marca.
• GooeyBlobs — Metaballs líquidas: varios blobs con gradiente orbitan y, al acercarse, se funden y separan como una lámpara de lava, gracias a un filtro gooey SVG (feGaussianBlur + umbral de alfa con feColorMatrix). Animación en bucle con rAF propio y respeto a prefers-reduced-motion (composición estática). Configurable: número de blobs, dos colores del gradiente y velocidad.
• IconMorph — Un icono SVG que muta en bucle entre un set de glifos (play, corazón, estrella, rayo, chat) con cross-fade y un pop de escala/rotación suave. Relleno con gradiente diagonal configurable. Respeta prefers-reduced-motion mostrando un glifo fijo sin ciclo. Solo React + SVG/CSS, sin dependencias.
• SignatureDraw — Una firma manuscrita cursiva que se dibuja sola de trazo a trazo (stroke-dashoffset) y hace bucle: bucles de escritura encadenados y un flourish de subrayado final, trazo fino redondeado. Configurable en color, grosor, duración y bucle. Respeta prefers-reduced-motion (firma completa estática).
• SquiggleUnderline — Un texto grande con un subrayado dibujado a mano: un path SVG ondulado que se traza solo con stroke-dashoffset y trazo redondeado en color de acento. Elige el disparador (bucle continuo, al entrar en vista o al hover), ajusta color, grosor y duración. Respeta prefers-reduced-motion mostrando el subrayado completo estático. Ideal para hero, títulos y llamadas de atención con un toque manuscrito.
• LineDraw — Una línea SVG ondulada, dibujada a mano, que se traza sola con stroke-dashoffset y hace bucle (traza → pausa → borra → reinicia). Trazo redondeado con gradiente opcional. Auto-anima sin interacción; respeta prefers-reduced-motion mostrando la línea completa estática.