Orbiting Circles

Ein Element bewegt sich entlang eines eigenen gekrümmten Pfads und kann sich dabei in Laufrichtung drehen.

Füge bei [wo] eine „Motion Path“-Animation hinzu (auch animate along path genannt).
Ein kleines Element soll langsam und gleichmäßig einer eigenen gekrümmten Route folgen und sich dabei stets in Bewegungsrichtung drehen.
Nimm eine geschlossene Route, damit die Schleife ohne Sprung wiederholt, und lass die Route mit ihrem Container mitskalieren statt in fester Größe zu bleiben.

Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.

Füge bei [wo] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Partikel kreisen spiralförmig um einen Mittelpunkt wie ein Strudel.

Füge bei [wo] einen „Vortex“-Hintergrund hinzu (auch swirling particles genannt).
Kleine Partikel sollen wie in einem Strudel spiralförmig um einen Mittelpunkt nach innen kreisen, am Rand einblenden und zur Mitte hin ausblenden, in einem fließenden, durchgehenden Wirbel.
Halte die Zahl der Partikel moderat, pausiere außerhalb des sichtbaren Bereichs und stoppe den Wirbel bei reduzierter Bewegung (prefers-reduced-motion).

Eine rotierende 3D-Erde mit Markern oder Bögen sitzt im Layout.

Füge bei [wo] einen „3D Globe“ hinzu (auch interactive globe genannt).
Ein Globus mit einigen Markern auf der Oberfläche soll sich langsam und gleichmäßig um seine Achse drehen, die Marker drehen sich mit: ruhig und fortlaufend.
Halte ihn dekorativ mit einer Textalternative für die gezeigten Informationen, pausiere ihn außerhalb des sichtbaren Bereichs und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Vektorform verwandelt sich fließend in eine andere.

Füge bei [wo] einen „Shape Morph“ hinzu (auch path morphing oder SVG morph genannt).
Eine Form soll sich fließend in eine andere verwandeln, etwa ein Fünfeck, das sich zu einem Stern einschnürt, wobei die Punkte gleichmäßig und ohne Eile an ihren Platz gleiten.
Gib beiden Formen gleich viele zueinander passende Punkte, damit der Morph sauber und ohne Flackern bleibt, und spiele ihn einmal pro Zustandswechsel ab statt in Schleife.

Ein SVG-Filter verzerrt Text oder Formen mit animiertem Rauschen.

Füge bei [wo] einen „SVG Displacement Distortion“-Hover-Effekt hinzu (auch displacement map effect genannt).
Solange der Zeiger darüber ist, soll der Text oder die Form wellen und wabern, als sähe man sie durch bewegtes Wasser, sanft einsetzend, und beim Verlassen wieder scharf werden.
Wende den Verzerrungsfilter nur an, solange der Effekt aktiv ist, damit er im Ruhezustand nichts kostet, und zeig denselben Effekt bei Tastaturfokus.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.