SVG-Blob-Generator

Erzeuge weiche, zufällige organische SVG-Formen — SVG oder CSS-clip-path kopieren.

Zuletzt aktualisiert 17. Mai 2026

Punkte6Zufall50

Gradient

SVG-Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

Was ist ein SVG-Blob-Generator?

Ein SVG-Blob-Generator erstellt geschlossene organische Formen, indem er Punkte um einen Kreis abtastet und sie mit weichen Bézier-Kurven verbindet. Das Ergebnis ist eine weiche, fließende Silhouette — die Art Form, die du hinter einem Marketing-Hero, um ein Profilfoto herum oder als bunten Hintergrund-Blob auf einer Landing-Page siehst.

Blobs leben am Sweet Spot zwischen Geometrie und Zufall. Stelle die Punktanzahl ein, um Gummibärchen-Formen (3-4), Kieselstein-Formen (5-6) oder chaotische Formen (10+) zu bekommen. Bewege den Zufalls-Slider, um von fast kreisförmig zu wild verzerrt zu gelangen. Drück den Würfel, um jederzeit einen neuen Seed zu rollen.

Alles läuft in deinem Browser. Exportiere als copy-paste-fertiges SVG-Snippet, herunterladbare .svg-Datei oder als CSS-clip-path-Wert, den du direkt auf jedes HTML-Element anwenden kannst, um es in die Blob-Form zu maskieren.

Was du beim Erstellen von Blobs lernst

Kubische Bézier-Kurven geben dem Blob seine Weichheit — jedes benachbarte Punktpaar hat zwei Kontrollgriffe, berechnet so, dass die Tangente an jeder Verbindung stetig ist.
Catmull-Rom-Splines (hier verwendet) leiten diese Griffe automatisch aus den Nachbarpunkten ab, sodass du keine Kontrollpunkte manuell anpassen musst, um die Kurve weich zu halten.
CSS clip-path: path(...) kann eine Blob-Form auf jedes Element anwenden — Bild, div, Video — ohne seine Layout-Box zu beeinflussen.

So generierst du einen Blob Schritt für Schritt

Punktanzahl wählen
Weniger Punkte (3-5) ergeben Gummibärchen-Blobs. Mehr Punkte (8-12) ergeben kieselsteinige, unregelmäßige Formen.
Zufall einstellen
0% ist ein Kreis. 50% ergibt sanfte Blob-förmige Kurven. 100% ergibt wild verzerrte, dramatische Silhouetten.
Farbe oder Gradient wählen
Volle Füllung, oder Gradient aktivieren und zwei Farben plus Winkel wählen. Passt zu beliebten Hero-Section-Mustern.
Zufallisieren und exportieren
Drück den Würfel für einen neuen Seed. Wenn du zufrieden bist, kopiere das SVG, kopiere den CSS-clip-path oder lade die .svg-Datei herunter.

Wo Blobs am besten funktionieren

Drei gängige Wege, einen Blob zu verwenden, und worauf du achten musst.

Anwendungsfall	Wie anwenden	Achtung bei
Hero-Hintergrund	SVG einbetten, absolut hinter dem Inhalt positionieren	Kontrast halten — Text über dem Blob braucht lesbare Farbe
Bildmaske	CSS clip-path: path('…') auf <img> anwenden	Bildquelle wird trotzdem geladen — Clip ist nur visuell
Avatar-Form	Profilfoto in einem div mit clip-path wickeln	Nur border-radius nehmen, wenn ein Kreis genügt — clip-path ist teurer beim Neuzeichnen
Sektionsteiler	Einen breiten Blob entlang der Unterkante einer Sektion strecken	viewBox preserveAspectRatio nutzen, damit die Form auf breiten Bildschirmen stimmt
Dekorativer Akzent	Mehrere halbtransparente Blobs in verschiedenen Größen platzieren	Animation sparsam halten — große neu zu zeichnende Pfade verbrennen CPU
Marken-Illustration	Einen Blob mit Text oder Icon darüber kombinieren	Einen konsistenten Formstil wählen, damit eine Markenidentität trägt

Blob-Beispiele zum Ausprobieren

Einen Blob in eine Hero-Section setzen

HTML

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Willkommen bei Coddy</h1></section>

CSS

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

Ein absolut positioniertes SVG sitzt hinter der Überschrift. Die Opacity senken, damit der Text darüber ohne backdrop-filter lesbar bleibt.

Ein Bild in einen Blob maskieren

CSS

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path wird in allen modernen Browsern unterstützt. Die Pfadkoordinaten gehen von einer 400×400-viewBox aus — skaliere das Bild auf diese Box, damit der Clip sauber ausgerichtet ist.

Zwei weiche Blobs als dekorativer Hintergrund

HTML

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

CSS

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Verschwommene Blobs stapeln gibt ein weiches "Aurora"-Gefühl. Halte sie mit negativen Offsets außerhalb des sichtbaren Bereichs, damit nur die gerundeten Kanten hineinschauen.

Häufige Fehler mit SVG-Blobs

viewBox vergessen und dem <svg> eine feste width/height geben. Die Form skaliert nicht responsiv — viewBox plus width/height in CSS verwenden.
Große gefüllte Pfade in jedem Frame animieren. Pfad-Rasterisierung ist teuer; nutze transform/opacity oder vorab CSS-filter blur, damit die GPU es übernimmt.
Inline-<svg> in Tailwind/Bootstrap kopieren und display: inline statt block erben. Der Standard-Baseline-Gap lässt ein paar Pixel unter der Form.

Häufige Fragen

Was ist ein Blob im Design?

Ein Blob ist eine organische, asymmetrische geschlossene Form aus weichen Kurven. Sie sind beliebt im modernen Webdesign — Hero-Hintergründe, Badges, Avatar-Masken — weil sie einladender wirken als Kreise und polierter als frei gezeichnete Formen.

Ist das erzeugte SVG kommerziell frei nutzbar?

Ja. Die Ausgabe ist nur SVG-Markup, das du selbst generiert hast — keine Lizenz angehängt und keine Attribution erforderlich. Nutze es auf kommerziellen Seiten, Apps, Decks, überall.

Kann ich den Pfad nach dem Kopieren bearbeiten?

Ja — die Ausgabe ist ein standardmäßiges SVG-<path d="…">. Öffne es in Figma, Illustrator, Inkscape oder einem beliebigen Vektoreditor, um Kontrollpunkte anzupassen. Oder regeneriere hier und kopiere eine neue Form.

Wie nutze ich die CSS-clip-path-Ausgabe?

Wende clip-path: path('M … Z') auf jedes HTML-Element an. Die Koordinaten liegen im selben SVG-viewBox-Raum (Standard 400×400 hier), also dimensioniere das geclippte Element auf diese Box, damit der Clip passt — oder skaliere die Pfadkoordinaten.

Gibt Math.random bei jedem Besuch dieselbe Form?

Nein, aber dieses Tool nutzt einen seedeten Pseudo-Zufallsgenerator. Derselbe Seed produziert immer denselben Blob — du kannst also Randomize drücken, bis du eine Form findest, die dir gefällt, und die SVG-Ausgabe behält genau diese Form für immer.

Bremsen Blobs meine Seite aus?

Ein einzelner statischer SVG-Blob ist im Grunde umsonst. Mehrere animierte Blobs mit Blur-Filtern können auf Mobile teuer werden — profiliere in DevTools und bevorzuge Transform/Opacity-Animationen statt Pfad-Attribut-Animationen.