Was ist ein SVG-Blob?

Ein Blob ist eine weiche, organische Form ohne gerade Kanten – irgendwo zwischen einem Kreis und einem Farbspritzer. Blobs sind eine beliebte Dekoration im modernen Webdesign: hinter Hero-Bildern und Illustrationen, als Rahmen für Avatare, als Abschnittshintergründe oder als verspielte Schaltflächen und Badges. Da es sich um Vektorgrafiken handelt, bleiben sie bei jeder Größe scharf und benötigen nur wenige hundert Bytes.

Toolbeschreibung

Dieses Tool erzeugt zufällige Blob-Formen als sauberen SVG-Code direkt in Ihrem Browser. Klicken Sie auf „Zufall“, bis Ihnen die Form gefällt, und passen Sie anschließend die Anzahl ihrer Ausbuchtungen, ihre Unregelmäßigkeit und die Rundung ihrer Kurven an. Füllen Sie sie mit einer Volltonfarbe oder einem Farbverlauf oder stellen Sie sie als Kontur dar. Optional können Sie sie in einer fließenden Schleife zwischen verschiedenen Formen morphen lassen. Laden Sie das Ergebnis als SVG oder PNG herunter oder kopieren Sie es als SVG-Markup, CSS-Hintergrund oder CSS-clip-path.

Funktionen

  • Reproduzierbare zufällige Blobs: Derselbe Seed und dieselben Einstellungen ergeben immer dieselbe Form
  • Anpassbare Komplexität, Zufälligkeit und Glätte – von runden Kieselsteinen bis zu stacheligen Sternen
  • Vollton-, Verlaufs- oder Konturfüllung mit jeder beliebigen Farbe
  • Morphing-Animation, die zwischen Formen wechselt und ohne JavaScript direkt in das SVG integriert ist
  • Download als SVG oder transparentes PNG in der von Ihnen gewählten Größe
  • Kopierfertiger Code für SVG, CSS-Hintergrund und CSS-clip-path

So funktioniert es

Das Tool platziert Punkte entlang eines Kreises, verschiebt jeden Punkt um einen zufälligen Betrag nach innen und zeichnet eine glatte, geschlossene Kurve durch diese Punkte. Die Kurve wird exakt vermessen und so skaliert, dass der Blob das Bild von Kante zu Kante ausfüllt. Ein zufallsbasierter Zahlengenerator mit Seed bestimmt jeden Punkt, sodass ein Seed aus einer Zahl oder einem Wort später dieselbe Blob-Form wiederherstellt. Für die Animation werden mehrere Blobs mit derselben Punktanzahl in einem SVG-Element animate platziert, und der Browser blendet zwischen ihnen über.

Tipps

  • Fünf bis acht Punkte mit mittlerer Zufälligkeit ergeben klassische Blob-Formen; eine geringere Zufälligkeit wirkt ruhiger und professioneller.
  • Verringern Sie die Glätte auf 0 %, um kristall- oder edelsteinartige Polygone zu erzeugen.
  • Verwenden Sie den CSS-clip-path-Code, um ein Foto oder Video in die Blob-Form zuzuschneiden.
  • Notieren Sie sich den Seed oder geben Sie ein eigenes Wort als Seed ein, um später exakt denselben Blob zu reproduzieren.
  • Halten Sie die Morphing-Animation langsam – etwa 8 bis 15 Sekunden pro Schleife –, damit sie im Hintergrund ruhig wirkt.