Blob-Generator

Schöne organische SVG-Formen mit eigenen Bézier-Kurven erzeugen.

Einstellungen

Blob-Kanten (Vertices)6

Spitzen (Komplexität)60%

Füllmodus

VolltonfarbeLinearRadial

Startfarbe

Endfarbe

Roher SVG-XML-Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

React JSX-Komponente

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);

So funktioniert es

Justieren Sie Zufälligkeit und Komplexität, um einen organischen Blob zu formen.
Wählen Sie Farben und einen Verlauf für die Füllung.
Generieren Sie neu, bis Sie eine Form erhalten, die Ihnen gefällt.
Exportieren Sie rohen SVG-Code oder eine einsatzbereite React-JSX-Komponente.

Wofür man es nutzt

Eine organische Hintergrundform zu einer Landingpage hinzufügen.
Dekorative Blobs für ein Designsystem erstellen.
Einen SVG-Blob direkt als Komponente in ein React-Projekt einfügen.

Gut zu wissen

Blobs werden prozedural erzeugt — generieren Sie neu, um Variationen zu erkunden, statt einzelne Punkte zu bearbeiten.
Sehr hohe Komplexität erzeugt längere Pfaddaten; einfachere Blobs halten das SVG leichtgewichtig.

Häufige Fragen

Kann ich den Blob direkt in React verwenden?

Ja — exportieren Sie als JSX-Komponente und fügen Sie sie in Ihr Projekt ein oder nehmen Sie das rohe SVG für jeden anderen Stack.

Sind die Formen anschließend bearbeitbar?

Das exportierte SVG ist standardkonformer Vektor, den Sie in jedem Editor feinjustieren können, auch wenn das Tool selbst über Neugenerierung statt Punktbearbeitung arbeitet.

Wird irgendetwas hochgeladen?

Nein. Erzeugung und Export geschehen vollständig in Ihrem Browser.

Blob-Generator

Einstellungen

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Kann ich den Blob direkt in React verwenden?

Sind die Formen anschließend bearbeitbar?

Wird irgendetwas hochgeladen?

Verwandte Tools

So funktioniert es

Wofür man es nutzt

Gut zu wissen

Häufige Fragen

Kann ich den Blob direkt in React verwenden?

Sind die Formen anschließend bearbeitbar?

Wird irgendetwas hochgeladen?