Componentes de SVG Animations

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

• 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.