Icon Morph

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.

Das Kopieren-Symbol verwandelt sich in ein Häkchen, und die Beschriftung zeigt kurz Kopiert.

Füge bei [wo] eine „Copy-to-Clipboard Feedback“-Animation hinzu (auch copied state oder copy icon to checkmark genannt).
Beim Drücken des Kopieren-Buttons soll das Kopieren-Symbol schnell wegschrumpfen, während sich ein Häkchen einzeichnet und die Beschriftung zu „Kopiert“ wechselt; nach einem kurzen Moment kehrt alles weich zurück.
Halte den Button während des Wechsels gleich groß, damit sich nichts verschiebt, und gib den Kopiert-Zustand an Screenreader aus.

Ein Augensymbol wechselt zwischen offen und durchgestrichen, wenn das Passwort ein- oder ausgeblendet wird.

Füge bei [wo] einen „Password Reveal Toggle“ hinzu (auch show/hide password oder eye icon toggle genannt).
Ein Druck auf das Auge soll den Schrägstrich schnell wegwischen, während die verdeckten Punkte in die echten Zeichen überblenden, und ein erneuter Druck zeichnet den Strich zurück und verbirgt sie wieder: weich und schnell, ohne Nachfedern.
Halte die Feldbreite stabil, damit der Text nicht springt, und mach den Schalter zu einem echten Button, dessen Beschriftung sagt, ob das Passwort sichtbar ist.

Eine SVG-Kontur scheint sich entlang ihres Pfads selbst zu zeichnen, indem der Dash-Offset animiert wird.

Füge bei [wo] eine „Line Drawing“-Animation hinzu (auch path drawing oder self-drawing SVG genannt).
Jede Linie soll sich scheinbar selbst weich entlang ihres Pfads von Anfang bis Ende zeichnen, und eine zweite Linie wie ein Häkchen folgt direkt nach der ersten.
Spiele sie einmal ab, wenn sie ins Bild kommt, statt sie zu wiederholen, und zeige bei reduzierter Bewegung (prefers-reduced-motion) die fertig gezeichneten Linien.

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.

Kleine Kreise oder Icons kreisen auf runden Bahnen um einen Mittelpunkt.

Füge bei [wo] „Orbiting Circles“ hinzu (auch orbit animation oder orbiting icons genannt).
Kleine Kreise sollen langsam und gleichmäßig auf runden Ringen um ein zentrales Element kreisen, wobei sich der äußere Ring in die Gegenrichtung und langsamer dreht.
Halte die Schleife nahtlos und die kreisenden Elemente aufrecht, und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).