Blob-Generator: SVG-Formen und animierte CSS-Blobs
Blob-Generator
Blob-Generator: zufällige SVG-Blobs und CSS-Blob-Animation | We.Inc
Erzeuge zufällige organische Blob-Formen als SVG-Pfade oder als reinen CSS-Blob mit border-radius, der mit kopierbaren @keyframes morphen kann. Mit Seed, damit du denselben Blob wiederbekommst.
Ein Blob ist eine weiche, unregelmäßige geschlossene Form, die hinter Fotos, Icons und Hero-Texten eingesetzt wird. Dieser Generator erstellt sie auf zwei Arten: als SVG-Pfad durch zufällig verschobene Punkte auf einem Kreis oder als reines CSS mit acht border-radius-Prozentwerten. Die CSS-Version kann mit einer kurzen @keyframes-Animation, die du kopierst, zwischen Formen morphen.
SVG-Blob oder CSS-Blob?
SVG-Pfad-Blob
CSS-border-radius-Blob
Formenvielfalt
Beliebig viele Ausbuchtungen, sehr unregelmäßig
Ei- und Kieselformen mit vier weichen Seiten
Enthält Inhalte
Als Hintergrundbild oder Maske
Ja, es ist eine normale Box mit Text oder Bild darin
Morph-Animation
Braucht JavaScript oder SMIL
@keyframes auf border-radius
Ausgabe
Ein svg-Element oder eine .svg-Datei
Ein paar Zeilen CSS
Blobs lockern starre Rasterlayouts auf und geben einer Marke eine ganz eigene Form. Jeder Blob hier entsteht aus einer Seed-Zahl, sodass dieselben Einstellungen und derselbe Seed immer dieselbe Form erzeugen. Probier den SVG-Modus für Formen mit vielen Ausbuchtungen und wechsle in den CSS-Modus, wenn du eine Box willst, die langsam wabert.
Wähle den SVG-Modus oder den CSS-Modus.
Lege im SVG-Modus fest, wie viele Punkte die Form hat und wie weit sich jeder Punkt vom Kreis entfernen darf. Jeder neue Seed ergibt eine neue Form.
Klicke im CSS-Modus auf Neue Form, um frische border-radius-Werte zu würfeln, und aktiviere Animieren, um ein Morphen zwischen drei Formen zu erhalten.
Kopiere das SVG-Markup, lade die .svg-Datei herunter oder kopiere das CSS samt Keyframes.
5 bis 8 Punkte mit mittlerer Zufälligkeit ergeben die freundlichsten Formen. Viele Punkte mit hoher Zufälligkeit sehen aus wie Spritzer.
Verwende den SVG-Blob als mask-image oder mit position: absolute hinter einem Foto, damit Text auswählbar bleibt.
Halte Blob-Animationen langsam, 6 bis 12 Sekunden, und lass sie alternieren, damit die Bewegung nie an den Anfang zurückspringt.
Schalte die Animation für Besucher ab, die reduzierte Bewegung bevorzugen. Die Keyframes-Ausgabe enthält diese Media Query bereits.
Häufige Fragen
Wie funktioniert der CSS-Blob?
border-radius akzeptiert für jede Ecke getrennte horizontale und vertikale Radien, geschrieben als vier Werte, ein Schrägstrich und vier weitere. Wenn die beiden Radien, die sich auf jeder Seite treffen, zusammen 100 Prozent ergeben, verschmelzen die Ecken zu einer glatten organischen Kontur statt zu einem abgerundeten Rechteck.
Wie animiere ich einen Blob in CSS?
Setze zwei oder mehr border-radius-Werte in @keyframes und lass die Animation mit ease-in-out, infinite und alternate laufen. Browser interpolieren jeden Eckradius, sodass die Kontur fließend von einer Form zur nächsten übergeht. Aktiviere im CSS-Modus Animieren, um fertige Keyframes zu erhalten.
Kann ich denselben Blob später wieder erzeugen?
Ja. Die Form hängt nur von den Einstellungen und der Seed-Zahl ab. Notiere dir den Seed oder behalte den kopierten Code, und der Generator baut genau diese Kontur wieder auf.
Kann ich den SVG-Blob als clip-path verwenden?
Du kannst ihn mit clip-path: url(#id) referenzieren, wenn das SVG auf derselben Seite liegt, oder das d-Attribut in clip-path: path() einfügen, für eine feste Pixelgröße. Ein mask-image mit der .svg-Datei ist der einfachste Weg, ihn mit dem Element zu skalieren.
Wie der SVG-Blob gezeichnet wird
Der Generator verteilt Punkte gleichmäßig auf einem Kreis und verschiebt dann jeden um einen zufälligen Betrag nach innen oder außen, gesteuert über den Regler für die Zufälligkeit. Durch die Punkte wird mit kubischen Bezier-Segmenten eine glatte Kurve gelegt, damit es keine scharfen Ecken gibt.
Weniger Punkte und geringere Zufälligkeit ergeben einen Kiesel. Mehr Punkte und höhere Zufälligkeit ergeben einen Spritzer oder eine Wolke.
Blob-Animation ohne JavaScript
Die CSS-Eigenschaft d, mit der du einen SVG-Pfad im Stylesheet morphen könntest, ist laut MDN nicht Baseline und funktioniert daher in einigen großen Browsern nicht. Deshalb nutzt die animierte Option border-radius. Jeder Eckradius ist eine Länge oder ein Prozentwert, sodass der Browser selbstständig zwischen Keyframes überblenden kann.
Eine langsame Drehung zusätzlich zur Radiusänderung lässt die Bewegung organischer wirken. Halte sie sanft, damit sie im Hintergrund bleibt.
Beispiel für eine CSS-Blob-Animation
Morphender Blob hinter einem Fotorahmen
Drei border-radius-Formen in einer alternierenden Animation, dazu eine langsame Drehung. Die Media Query für reduzierte Bewegung stoppt sie für Menschen, die weniger Bewegung wünschen.
Einen border-radius mit acht Werten lesen
Die Werte vor dem Schrägstrich sind horizontale Radien, die danach vertikale, jeweils in der Reihenfolge oben links, oben rechts, unten rechts, unten links.
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%
Ecke
Horizontaler Radius
Vertikaler Radius
Oben links
Oben rechts
Unten rechts
Unten links
Blob-Werkstatt
Jede Form entsteht aus dem Seed, der unter der Vorschau angezeigt wird. Ändere die Regler oder würfle einen neuen Seed und kopiere dann das SVG oder CSS.