SVG-Blob-Generator (organische Formen)
Tippe auf eine andere Form, bis eine passt. Passe die Punkte und die Unregelmäßigkeit an, wähle die Farben und kopiere das SVG oder nutze es als Fotomaske.
So geht’sOrganische Formen für die Website
Verfügbar auf: 
SVG-Blob-Generator (organische Formen): wofür es gut ist
Wähle die Zahl der Punkte und die Unregelmäßigkeit, die Farbe oder einen Verlauf aus zwei Farben und erzeuge mit einem Tippen neue Formen. Die Kurve läuft sanft durch alle Punkte und schließt ohne Ecken.
Lade das SVG herunter, kopiere den Code oder die Maskenversion (clipPath), um jedes Foto in der Form des Blobs zuzuschneiden.
So geht’s
- Passe Punkte und Unregelmäßigkeit an.
- Wähle Farbe oder Verlauf und erzeuge Formen, bis es dir gefällt.
- Lade das SVG herunter oder kopiere die Fotomaske.
Wann nutzen
- Hintergründe hinter Fotos und Illustrationen.
- Profilfotos mit organischer Form.
- Schmuck in Abschnitten von Websites und Beiträgen.
Häufige Fragen
Wozu dient ein Blob?
Organische Formen brechen die Starrheit quadratischer Layouts: Sie wirken gut hinter Fotos, Icons und Illustrationen, als Hintergrund von Abschnitten und als Rahmen für Profilfotos.
Wie nutze ich es als Fotorahmen?
Kopiere den Code der Maske (clip-path): Er nutzt dieselbe Zeichnung in einem clipPath mit relativen Koordinaten, und jedes Bild mit dem Stil clip-path:url(#blob) bekommt die Form des Blobs.
Kann ich es animieren?
Ja, indem du zwei Formen mit gleicher Punktzahl erzeugst und das Attribut d mit CSS oder JavaScript animierst. Nutze langsame Animationen und beachte, wer weniger Bewegung bevorzugt (prefers-reduced-motion).
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.