Generatore Blob

Forme SVG organiche con curve di Bézier personalizzate.

Impostazioni

Bordi del blob (vertici)6

Punte (complessità)60%

Modalità riempimento

Tinta unitaLineareRadiale

Colore iniziale

Colore finale

Codice SVG XML grezzo

<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>

Componente React JSX

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>
);

Come funziona

Regola casualità e complessità per plasmare una forma organica (blob).
Scegli i colori e una sfumatura per il riempimento.
Rigenera finché non ottieni una forma che ti piace.
Esporta il codice SVG grezzo o un componente React JSX pronto all'uso.

A cosa serve

Aggiungere una forma di sfondo organica a una landing page.
Creare blob decorativi per un design system.
Inserire un blob SVG direttamente in un progetto React come componente.

Da sapere

I blob vengono generati proceduralmente: rigenera per esplorare variazioni invece di modificare i singoli punti.
Una complessità molto alta produce dati di tracciato più lunghi; i blob più semplici mantengono l'SVG leggero.

Domande frequenti

Posso usare il blob direttamente in React?

Sì: esporta come componente JSX e inseriscilo nel tuo progetto, oppure prendi l'SVG grezzo per qualsiasi altro stack.

Le forme sono modificabili in seguito?

L'SVG esportato è vettore standard che puoi rifinire in qualsiasi editor, anche se lo strumento stesso lavora per rigenerazione anziché per modifica dei punti.

Viene caricato qualcosa?

No. La generazione e l'esportazione avvengono interamente nel tuo browser.

Strumenti correlati

Visualizzatore DXF

Tavolozza Colori

Convertitore Colori

Generatore Box Shadow CSS

Verifica Contrasto