SVG-Blob-Generator

Erzeuge organische, zufällige SVG-Blob-Formen aus Einstellungen für Komplexität und Kontrast, generiere Variationen über einen Seed, betrachte sie in Echtzeit und kopiere das SVG oder den CSS-clip-path.

Tool wird geladen…

SVG-Blob-Generator — Lege fest, wie viele Punkte die Form hat (Komplexität) und wie unregelmäßig ihre Kanten sind (Kontrast), und klicke dann auf Neu generieren, um aus dem nächsten Seed eine neue zufällige Variation zu würfeln. Eine Live-Vorschau zeigt den Blob, während du ihn anpasst, und du erhältst sowohl das vollständige SVG-Markup als auch einen CSS-clip-path, den du in ein Stylesheet einfügen kannst. Alles wird in deinem Browser mit einem Seed-basierten Zufallsgenerator berechnet; keine Formen, Farben oder Einstellungen verlassen jemals dein Gerät.

Was ist SVG-Blob-Generator?

Der SVG-Blob-Generator ist ein kostenloses Browser-Tool für Designer und Frontend-Entwickler, die weiche, organische Blob-Formen für Hintergründe, Hero-Bereiche, Avatare oder dekorative Akzente wollen, ohne sie von Hand zu zeichnen. Du steuerst zwei Werte: die Komplexität (die Anzahl der Ankerpunkte rund um die Form) und den Kontrast (wie weit jeder Punkt von einem perfekten Kreis abweicht). Ein Seed im State, der über die Schaltfläche Neu generieren erhöht wird, lässt dich endlose Variationen durchlaufen, während Komplexität und Kontrast fest bleiben. Die Ausgabe wird als eine einzige glatte, geschlossene Bézier-Pfad gerendert, sodass du sauberes SVG-Markup kopieren, eine CSS-clip-path()-Regel zum Maskieren beliebiger Elemente erhalten oder eine einsatzbereite .svg-Datei herunterladen kannst. Nutze es, um schnell markengerechte Dekorationen zu erstellen oder um zu lernen, wie Blob-Pfade aus Punkten um einen Kreis aufgebaut werden.

So verwendest du SVG-Blob-Generator

  1. Öffne die Einstellungen und lege die Komplexität (Anzahl der Punkte, 3-16) für die Form fest.
  2. Stelle den Kontrast (0-100) ein, um zu steuern, wie unregelmäßig und wellig die Kanten sind.
  3. Wähle eine Füllfarbe über das Farbfeld oder durch Eingabe eines HEX-Werts.
  4. Klicke auf Neu generieren, um aus dem nächsten Seed eine neue zufällige Variation zu würfeln, bis dir die Form gefällt.
  5. Kopiere das SVG-Markup oder die CSS-clip-path-Regel oder klicke auf Herunterladen, um eine .svg-Datei zu speichern.

Beispiele

Sanfter Hintergrund-Blob

Setze die Komplexität auf 6 und den Kontrast auf etwa 40 für einen weichen, abgerundeten Blob und generiere dann ein paar Mal neu, bis du eine ansprechende Form für einen Hero- oder Karten-Hintergrund findest.

Spitze organische Form

Erhöhe die Komplexität auf 12 und den Kontrast auf 80 für eine zackigere, energischere Silhouette, nützlich für Badges oder verspielte Illustrationen.

CSS-clip-path-Maske

Kopiere die generierte Regel clip-path: path('...') und wende sie auf ein Bild oder ein div an, damit das Element auf die Blob-Kontur zugeschnitten wird.

Häufig gestellte Fragen

Was steuern Komplexität und Kontrast?
Die Komplexität ist die Anzahl der gleichmäßig um einen Kreis verteilten Ankerpunkte (3 bis 16) — mehr Punkte ergeben eine detailliertere Kontur. Der Kontrast ist, wie weit jeder Punkt zufällig vom Basisradius nach innen oder außen verschoben wird (0 bis 100), sodass 0 nahe an einem schlichten Kreis und 100 hochgradig unregelmäßig ist.
Wie funktioniert die Schaltfläche Neu generieren?
Jeder Blob wird aus einem numerischen Seed plus deiner Komplexität und deinem Kontrast aufgebaut. Neu generieren erhöht den Seed um eins und berechnet die Form neu, sodass du bei jedem Klick eine frische zufällige Variation erhältst, während Komplexität, Kontrast und Farbe gleich bleiben.
Was ist der Unterschied zwischen der SVG- und der clip-path-Ausgabe?
Die SVG-Ausgabe ist eine vollständige, eigenständige <svg>-Datei, die du einbetten oder herunterladen kannst. Die clip-path-Ausgabe ist eine einzelne CSS-Regel mit path(), die du auf jedes HTML-Element anwenden kannst, um es auf dieselbe Blob-Kontur zuzuschneiden.
Kann ich die Farbe ändern und die Datei herunterladen?
Ja. Lege die Füllfarbe über das Farbfeld oder einen HEX-Wert fest; Vorschau, SVG und Download verwenden sie alle. Klicke auf Herunterladen, um eine blob.svg-Datei zu speichern, die vollständig in deinem Browser erzeugt wird.
Werden meine Formen oder Einstellungen an einen Server gesendet?
Nein. Der Blob wird mit einer lokalen Seed-basierten Zufallsfunktion erzeugt und alle SVG- und clip-path-Strings werden in deinem Browser gebaut. Es wird nichts hochgeladen, daher funktioniert das Tool offline und deine Arbeit bleibt privat.

Verwandte Tools

Code zu Bild

Verwandle einen Code-Schnipsel im Browser in ein Bild mit Syntaxhervorhebung – mit über 20 Sprachen, eigenen Themes und Hintergründen, Zeilennummern und PNG- oder SVG-Export.

Farbkontrast-Prüfer

Prüfe den WCAG-2.1-Kontrast und den APCA-Lc-Wert zwischen Text und Hintergrund, sieh AA-, AAA- und 3:1-Badges und wende die nächste bestandene Farbe an.

Farbmischer

Mische zwei HEX-Farben in einem gewählten Verhältnis im RGB- oder Lab-Farbraum und lies die entstehende Mittelfarbe als Farbfeld und kopierbaren HEX-Wert ab.

Farbabstufungs-Generator

Verwandle eine HEX-Basisfarbe in eine OKLCH-, HSL- oder RGB-Skala mit einstellbaren Stufen, WCAG-Kontrasthinweisen pro Stufe und Export als CSS, Tailwind und JSON.