Wie verwende ich eine Blob-Form in einem echten Projekt?

Verwenden Sie die heruntergeladene SVG als -Quelle, als CSS background-image, oder betten Sie den -Code direkt in Ihr HTML ein. In CSS können Sie clip-path mit der path()-Funktion verwenden.

Blob Generator

Zufällige organische Blob-Formen als SVG erstellen. Komplexität und Zufälligkeit anpassen, Farbe wählen, dann SVG herunterladen oder kopieren.

Sofort-SVGPfad kopierenKostenloser Download

① Komplexität, Zufälligkeit und Farbe anpassen ② Auf Zufällig klicken ③ SVG kopieren oder PNG laden

Komplexität (Punkte)6

Zufälligkeit50

Seed

Füllfarbe#C9B89A

So funktioniert es

Der Blob besteht aus N gleichmäßig verteilten Punkten auf einem Kreis, die jeweils zufällig nach innen oder außen verschoben werden. Kubische Bézier-Kurven verbinden die Punkte per Catmull-Rom-Konvertierung.

Komplexität

Steuert die Anzahl der Ankerpunkte (6–10). Mehr Punkte erzeugen aufwändigere, unregelmäßige Silhouetten. Weniger Punkte produzieren einfachere, rundere Blobs.

Zufälligkeit

Steuert, wie weit jeder Punkt vom Basiskreis abweichen kann. 0 ergibt einen perfekten Kreis; 100 maximale organische Unregelmäßigkeit.

Was ist eine Blob-Form und wie wird sie erstellt?

Blob-Formen sind weiche, organische, amöbenähnliche Silhouetten, die im modernen Webdesign für Hintergründe, Illustrationen, Avatare und UI-Akzente verwendet werden. Sie werden algorithmisch generiert, indem Ankerpunkte in gleichmäßigen Winkelabständen auf einem Kreis platziert werden, dann wird jeder Punkt radial zufällig verschoben. Kubische Bézier-Kurven — per Catmull-Rom-Konvertierung — verbinden die Punkte glatt. Das Ergebnis ist ein SVG-Pfad, einbettbar in HTML oder CSS über background-image, clip-path oder inline <svg>, exportierbar nach Figma, Illustrator und Inkscape.

Häufig gestellte Fragen

Eine Blob-Form ist eine weiche, organische, abgerundete Form, die einer natürlichen amöbenähnlichen Silhouette ähnelt. Im Gegensatz zu geometrischen Formen haben Blobs unregelmäßige, fließende Umrisse, die organisch und verspielt wirken. Sie werden häufig in modernem Webdesign für Hintergründe, Illustrationen und UI-Dekorationen verwendet.

Blobs werden erstellt, indem N Ankerpunkte in gleichen Winkelabständen auf einem Kreis platziert werden. Jeder Punkt wird dann zufällig nach innen oder außen verschoben. Kubische Bézier-Kurven — per Catmull-Rom-zu-Bézier-Konvertierung — verbinden alle Punkte zu einem glatten geschlossenen Pfad.

Komplexität steuert die Anzahl der Ankerpunkte (6–10). Mehr Punkte ermöglichen mehr lokale Variation. Zufälligkeit steuert den Betrag der Verschiebung jedes Punktes vom Basiskreis. Bei 0 liegen alle Punkte auf dem Kreis; bei 100 weichen sie maximal ab.

Das Tool gibt einen Standard-SVG-Pfad mit kubischen Bézier-Kurven aus (Befehl "C"). Das vollständige Markup ist ein selbständiges <svg>-Element mit viewBox "0 0 300 300". Der Pfad endet mit "Z", um die Form zu schließen.

Die generierte Form ist deterministisch bei gleichem Seed, Komplexität und Zufälligkeit. Sehr hohe Zufälligkeit mit niedriger Komplexität kann gelegentlich selbstschneidende Pfade erzeugen. SVG skaliert unendlich ohne Qualitätsverlust.

Verwenden Sie die heruntergeladene SVG als <img>-Quelle, als CSS background-image, oder betten Sie den <svg>-Code direkt in Ihr HTML ein. In CSS können Sie clip-path mit der path()-Funktion verwenden.

Ja. SVG und kubische Bézier-Kurven werden in allen modernen Browsern unterstützt. Die heruntergeladene Datei ist eine einfache SVG-XML-Datei, kompatibel mit Figma, Illustrator, Inkscape und Sketch.

Was ist eine Blob-Form und wie wird sie erstellt?

Häufig gestellte Fragen

Unser Netzwerk entdecken