SVG & Shape

Ein organischer Blob verändert fortlaufend seine Umrissform.

Füge bei [wo] eine „Blob Morph“-Loop-Animation hinzu (auch morphing blob oder animated blob genannt).
Ein organischer Blob soll seine Umrissform langsam und ständig verändern und sich dabei sanft drehen: fließend und weich, ohne scharfe Ecken.
Mach die Schleife nahtlos, damit die Form nie springt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Nahe Formen verschmelzen per Weichzeichner- und Kontrastfilter wie flüssige Tropfen miteinander.

Füge bei [wo] einen „Gooey Effect“ hinzu (auch goo effect oder metaballs genannt).
Solange der Zeiger darüber ist, sollen sich kleine Tropfen von der Hauptform lösen, sich dabei wie Flüssigkeit dehnen und dann abreißen; verlässt der Zeiger die Fläche, fließen sie zurück und verschmelzen weich.
Wende den Weichzeichner- und Kontrastfilter nur auf die kleine Gruppe von Formen an, nicht auf die ganze Seite, und zeig denselben Effekt bei Tastaturfokus und Antippen.

Ein Icon wie das Hamburger-Menü verwandelt sich durch drehende und verschobene Balken in ein anderes (X).

Füge bei [wo] einen „Icon Morph“ hinzu (auch hamburger to X oder menu icon morph genannt).
Bei jedem Drücken sollen der obere und untere Balken erst zur Mitte zusammengleiten und sich dann zu einem X drehen, während der mittlere Balken ausblendet; erneutes Drücken kehrt es um: schnell und knackig.
Mach daraus einen echten Umschalt-Button, dessen zugängliches Label und Expanded-Zustand sich mitändern, und halte die Icongröße fest, damit sich drumherum nichts verschiebt.

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).

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.