Tiny Online Tools
Gestalte schöne SVG-Blobs in Sekunden
Organische „Blob"-Formen gehören zu den beliebtesten Designtrends im modernen Webdesign — sie erscheinen als Hero-Hintergründe, Abschnittstrenner, dekorative Akzente auf Karten und sogar als App-Icons. Dieser SVG-Blob-Generator lässt dich einzigartige, perfekt glatte Blobs mit wenigen Reglern erstellen und anschließend das SVG kopieren oder herunterladen.
Wie der Blob aufgebaut wird
Der Generator verteilt eine bestimmte Anzahl von Ankerpunkten gleichmäßig um einen Kreis und verschiebt anschließend den Radius jedes Punktes um einen zufälligen Betrag, der vom gewählten Zufall-Wert abhängt. Die Punkte werden mit kubischen Bézier-Segmenten (abgeleitet von einer Catmull–Rom-Spline) zu einer geschlossenen, glatten Kurve verbunden. So entsteht immer eine saubere, kontinuierliche Kontur, egal wie chaotisch die zugrunde liegenden Punkte sind.
Ein deterministischer Seed steuert jede Zufallsentscheidung — dieselbe Konfiguration liefert also stets denselben Blob. Mit Neu würfeln kannst du neue Formen durchprobieren, ohne andere Einstellungen zu ändern.
Anpassungsoptionen
- Komplexität — Anzahl der Ankerpunkte (3 bis 20). Niedrige Werte ergeben weiche, runde Blobs. Hohe Werte erzeugen komplexe, wellige Konturen.
- Zufall — wie stark jeder Punkt vom Grundradius abweichen darf. Null ergibt einen Kreis; maximaler Zufall liefert dramatische organische Formen.
- Seed — ganzzahliger Wert, der jedes Ergebnis reproduzierbar macht. Gleicher Seed, gleiche Form.
- Füllung — wähle eine Volltonfarbe oder einen zweifarbigen linearen Verlauf mit einstellbarem Winkel.
- Kontur — optionale Umrandung mit konfigurierbarer Farbe und Breite.
Ausgabeformate
Der Generator erzeugt sauberen, minimalen SVG-Code, den du direkt in ein HTML-Dokument, eine React-Komponente, eine Figma-Datei oder ein beliebiges Designwerkzeug einfügen kannst. Kopiere den Code mit einem Klick in die Zwischenablage oder lade die Form als eigenständige .svg-Datei herunter.
Häufige Einsatzzwecke
- Hero-Hintergründe und Landingpage-Akzente
- Avatar-artige Bildmasken
- Dekorative Formen hinter Feature-Karten
- Abstrakte Badges und sticker-ähnliche UI-Elemente
- Blob-Übergänge zwischen Seitenbereichen
- Dekoration für Präsentationsfolien
Da die Ausgabe reines SVG ist, skaliert sie gestochen scharf in jeder Auflösung, hat eine winzige Dateigröße und kann mit CSS oder JavaScript animiert werden. Bei Bedarf kannst du den erzeugten Pfad auch in Illustrator, Figma oder Inkscape weiter bearbeiten.