Biblioteca visual · SVG animations

24 efectos listos para inspirar. Cada uno funciona de forma aislada, respeta prefers-reduced-motion, y es copy-paste directo al proyecto.

← Volver a la demo de los 5 patrones canónicos

Loaders · 4 variantes

Circular
SMIL rotate
Dots bounce
CSS keyframes
Equalizer
CSS height
Pulse ring
SMIL animate r

Iconos de estado · 4 variantes (se dibujan al aparecer)

Success
stroke-dashoffset
Error
stroke-dashoffset
Warning
stroke-dashoffset
Info
stroke-dashoffset

Iconos de acción · 4 variantes (pasa el ratón)

Heart beat
CSS @keyframes
Bell ring
CSS rotate
Search zoom
CSS transform
Download lift
CSS translateY

Hover microinteracciones · 4 variantes

Scale hover
transform: scale
Rotate 90°
transform: rotate
Shake
CSS @keyframes
Link
Underline draw
stroke-dashoffset

Morphs · 4 variantes (haz click)

Menu ↔ X
CSS transform
Plus ↔ Minus
scaleY
Chevron flip
transform: rotate
Copy → Check
opacity + scale

Decorativos de hero · 4 variantes

Wave
SMIL animate d
Orbit
animateMotion path
Gradient shift
SMIL stop-color
Particle path
animateMotion mpath