SVG & Shape

Una mancha orgánica cambia su contorno de forma continua.

Añade una animación en bucle "Blob Morph" (también llamada morphing blob o animated blob) en [dónde].
Una mancha orgánica debe cambiar su contorno lentamente sin parar mientras gira con suavidad, fluida y blanda, sin esquinas marcadas.
Haz que el bucle no tenga cortes para que la forma nunca salte, y déjala quieta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las formas cercanas se funden entre sí como gotas líquidas mediante un filtro de desenfoque y contraste.

Añade un "Gooey Effect" (también llamado goo effect o metaballs) en [dónde].
Al pasar el puntero por encima, unas gotas pequeñas deben separarse de la forma principal estirándose como líquido antes de soltarse, y volver fluyendo para fundirse con suavidad cuando el puntero se va.
Aplica el filtro de desenfoque y contraste solo al pequeño grupo de formas, no a toda la página, y muestra el mismo efecto con el foco del teclado y al tocar.

Un icono, como el menú hamburguesa, se transforma en otro (una X) con barras que giran y se desplazan.

Añade un "Icon Morph" (también llamado hamburger to X o menu icon morph) en [dónde].
En cada pulsación, las barras superior e inferior deben deslizarse juntas hasta el centro y luego girar hasta formar una X mientras la barra central se desvanece; al pulsar de nuevo, se invierte: rápido y ágil.
Hazlo un botón de alternancia real cuya etiqueta accesible y estado expandido cambien con él, y mantén fijo el tamaño del icono para que nada a su alrededor se mueva.

Un trazo SVG parece dibujarse a lo largo de su recorrido al animar el desplazamiento del guion.

Añade una animación "Line Drawing" (también llamada path drawing o self-drawing SVG) en [dónde].
Cada trazo debe parecer dibujarse solo con suavidad a lo largo de su recorrido de principio a fin, y un segundo trazo, como una marca de verificación, debe seguir justo después del primero.
Reprodúcela una sola vez al entrar en pantalla en lugar de repetirla, y muestra las líneas ya dibujadas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento recorre una trayectoria curva personalizada y puede girar para seguirla.

Añade una animación "Motion Path" (también llamada animate along path) en [dónde].
Un elemento pequeño debe recorrer una ruta curva personalizada a un ritmo lento y constante, girando para mirar hacia donde avanza.
Usa una ruta cerrada para que el bucle se repita sin saltos, y haz que la ruta se adapte al tamaño de su contenedor en lugar de quedarse con un tamaño fijo.

Círculos o iconos pequeños giran alrededor de un centro en órbitas circulares.

Añade "Orbiting Circles" (también llamado orbit animation u orbiting icons) en [dónde].
Unos círculos pequeños deben girar lenta y constantemente alrededor de un elemento central en anillos circulares, con el anillo exterior girando en sentido contrario y más despacio.
Mantén el bucle sin cortes y los elementos en órbita siempre derechos, y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una forma vectorial se transforma con suavidad en otra.

Añade un "Shape Morph" (también llamado path morphing o SVG morph) en [dónde].
Una forma debe transformarse con suavidad en otra, por ejemplo un pentágono que se estrecha hasta ser una estrella, con sus puntos deslizándose a su sitio a un ritmo uniforme y sin prisa.
Da a ambas formas el mismo número de puntos equivalentes para que la transformación quede limpia y sin parpadeos, y reprodúcela una vez por cada cambio de estado en lugar de en bucle.

Un filtro SVG deforma texto o formas con ruido animado.

Añade un efecto hover "SVG Displacement Distortion" (también llamado displacement map effect) en [dónde].
Mientras el puntero esté encima, el texto o la forma debe ondularse y temblar como si se viera a través de agua en movimiento, apareciendo con suavidad, y volver a verse nítido cuando el puntero se va.
Aplica el filtro de distorsión solo mientras el efecto esté activo para que no cueste nada en reposo, y muestra el mismo efecto con el foco del teclado.

Una forma de máscara barre o sigue al puntero para descubrir el contenido de debajo.

Añade un efecto hover "SVG Mask Reveal" (también llamado clip-path reveal o spotlight mask) en [dónde].
Mientras el puntero esté encima, una máscara circular debe crecer desde el centro y descubrir el contenido de debajo, y volver a cerrarse cuando el puntero se va: suave y bastante rápido.
Mantén las dos capas exactamente del mismo tamaño para que nada se mueva, y muestra el mismo revelado con el foco del teclado y al tocar.