Design / SVG

SVG-Blob-Generator (zufällige organische Formen)

Erstelle weiche, zufällige Blob-Formen für Hintergründe und Illustrationen: Lege die Anzahl der Punkte und die Zufälligkeit fest, wähle eine Farbe oder einen zweifarbigen Farbverlauf und lade das SVG herunter oder kopiere es.

SVG-Blob-Generator (zufällige organische Formen): Die Punkte werden gleichmäßig auf einem Kreis verteilt. Anschließend wird jeder Punkt um einen zufälligen Betrag zur Mitte gezogen und mit einer weichen, geschlossenen Kurve verbunden. Wenige Punkte und eine hohe Zufälligkeit erzeugen unregelmäßige Formen; viele Punkte und eine geringe Zufälligkeit ergeben sanfte, fast runde Formen. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
SVG-Blob-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path d="M359.5,200 C360.7,243.5 315.4,319 278.8,336.4 C242.1,353.9 174.7,327.5 139.5,304.7 C104.4,282 69.5,237.5 68,200 C66.4,162.5 96.4,100.3 130.4,79.5 C164.4,58.7 233.7,55.4 271.9,75.5 C310.1,95.6 358.4,156.5 359.5,200 Z" fill="#63c42d"/></svg>

Punkte werden gleichmäßig auf einem Kreis verteilt, jeweils um einen zufälligen Betrag zur Mitte gezogen und durch eine glatte geschlossene Kurve verbunden. Weniger Punkte und mehr Zufälligkeit ergeben unregelmäßigere Formen; 0 % Zufälligkeit ergibt einen Kreis. Blobs eignen sich als weiche Hintergründe für Fotos, Symbole und Überschriften.

Verwendung

Blobs eignen sich als weiche Hintergründe hinter Produktfotos, Symbolen, Avataren und Überschriften. Verwende hinter Text eine helle Farbe oder eine Füllung mit geringer Deckkraft, damit der Kontrast erhalten bleibt. Um den Blob hinter Milchglas zu sehen, kombiniere ihn mit dem Glassmorphism-Generator.

Bearbeitung

Die Ausgabe besteht aus einem Pfad mit kubischen Bézier-Kurven und lässt sich daher in jedem Vektoreditor öffnen. Um einige Punkte von Hand zu ändern, füge ihn in den SVG-Editor ein.

So benutzt du es

  1. Wähle die Anzahl der Punkte und die Zufälligkeit.
  2. Wähle eine Farbe oder einen Farbverlauf.
  3. Klicke auf neue Blobs, bis dir einer gefällt, und lade das SVG herunter oder kopiere es.

Datenschutz & Einschränkungen

Die Formen werden in deinem Browser gezeichnet.

Ähnliche Tools

SVG-WelleSVG-EditorGlassmorphism

Häufige Fragen

Wie setze ich ein Foto in einen Blob?

Kopiere den Pfad und verwende ihn in einem SVG clipPath oder speichere den Blob und nutze ihn als CSS mask-image über dem Foto.

Kann ich einen Blob animieren?

Ja: Erzeuge zwei Blobs mit derselben Anzahl an Punkten und animiere das d-Attribut des Pfads zwischen ihnen. Übereinstimmende Punktzahlen sorgen für einen weichen Übergang.

Gibt es eine Größenbegrenzung?

Das SVG ist 400 × 400 groß, lässt sich aber ohne Schärfeverlust auf jede Größe skalieren.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig