Blob-Generator
Erzeugen Sie zufällige, organische SVG-Blobs mit einstellbaren Punkten, Zufälligkeit, Verlaufsfüllungen und Konturen. SVG kopieren oder PNG herunterladen.
🔒 Läuft vollständig in Ihrem Browser — nichts wird hochgeladenOrganische SVG-Blobs in Sekunden
Blobs sind die weichen, unregelmäßigen Formen, die Sie hinter Hero-Bereichen, Profilfotos, Illustrationen und Onboarding-Screens von Apps sehen. Sie lockern starre Raster aus Rechtecken auf und verleihen einem Layout eine freundliche, handgemachte Anmutung. Dieser Blob-Generator erstellt sie als saubere SVG-Pfade: Wählen Sie ein paar Parameter, beobachten Sie, wie sich die Form aktualisiert, und kopieren Sie den Code direkt in Ihr Projekt.
Da ein Blob nur ein einziger SVG-Pfad ist, ist er winzig, skaliert ohne Qualitätsverlust und lässt sich per CSS umfärben oder animieren, indem man zwischen zwei Pfaden mit derselben Anzahl an Punkten morpht.
Wie die Form entsteht
Der Generator verteilt eine gewählte Anzahl von Ankerpunkten auf einem Kreis. Zufälligkeit zieht jeden Punkt um einen unterschiedlichen, zufälligen Betrag nach innen, während Größe die gesamte Kontur innerhalb der Zeichenfläche skaliert. Anschließend werden die Anker mit einem geschlossenen Catmull-Rom-Spline verbunden, der in kubische Bézier-Kurven umgewandelt wird – das garantiert glatte Übergänge ohne sichtbare Ecken. Mit drei oder vier Punkten erhalten Sie einfache Kieselsteinformen, während zehn oder mehr Punkte mit hoher Zufälligkeit wackelige, wolkenartige Gebilde ergeben. Bei 0 % Zufälligkeit ist das Ergebnis eine regelmäßige Form, die zu einem perfekten Kreis abgerundet wird.
Farben, Konturen und Wiederverwendung
Füllen Sie den Blob mit einer einzelnen Farbe oder einem diagonalen Zweifarbverlauf und fügen Sie eine Kontur von 1 bis 16 Pixeln hinzu, wenn Sie einen Sticker- oder Badge-Look brauchen. Jeder Blob entsteht aus einem numerischen Seed: Derselbe Seed mit denselben Einstellungen erzeugt immer dieselbe Form. So können Sie den Seed speichern, später einen Wert anpassen und alles andere unverändert lassen. Laden Sie ein SVG für das Web oder ein PNG mit 800 × 800 Pixeln und transparentem Hintergrund für Folien und Designtools herunter. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser, und nichts wird hochgeladen.
So verwenden Sie
- Form festlegenPassen Sie Anzahl der Punkte, Zufälligkeit und Größe an, um eine weiche, organische Kontur zu erhalten.
- Füllung wählenWählen Sie eine Volltonfarbe oder einen Zweifarbverlauf und fügen Sie optional eine Kontur hinzu.
- Zufällig variierenKlicken Sie auf „Randomize“ oder geben Sie eine Seed-Zahl ein, um neue Blobs zu entdecken.
- ExportierenKopieren Sie den SVG-Code oder laden Sie den Blob als SVG- oder PNG-Datei herunter.