Orbiting Circles

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.

El texto se dispone alrededor de un círculo que gira sin parar.

Añade "Spinning Text" (también llamado circular text o text on circle) en [dónde].
Las letras deben repartirse de forma uniforme alrededor de un círculo que gira lento y constante, sin salto cuando el bucle vuelve a empezar.
Da el texto a los lectores de pantalla una sola vez como texto normal y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las partículas giran en espiral alrededor de un centro como un remolino.

Añade un fondo "Vortex" (también llamado swirling particles) en [dónde].
Partículas pequeñas deben girar en espiral hacia dentro alrededor de un punto central como un remolino, apareciendo en el borde y desvaneciéndose al llegar al centro, en un giro fluido y continuo.
Usa una cantidad moderada de partículas, páusalo cuando esté fuera de pantalla y detén el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una Tierra 3D giratoria con marcadores o arcos se integra en el diseño.

Añade un globo 3D ("3D Globe", también llamado interactive globe) en [dónde].
Un globo con algunos marcadores en su superficie debe girar lenta y constantemente sobre su eje, con los marcadores girando con él: tranquilo y continuo.
Mantenlo decorativo con una alternativa de texto para la información que muestra, páusalo cuando esté fuera de pantalla 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.