Generatore di blob SVG

Genera forme SVG organiche, morbide e casuali: copia l'SVG o il clip-path CSS.

Di Nethanel Bar, Co-founder & CEO

Ultimo aggiornamento 17 maggio 2026

Vuoi imparare a programmare sul serio?

Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.

Inizia gratis

Cos'è un generatore di blob SVG?

Un generatore di blob SVG crea forme organiche chiuse campionando punti attorno a un cerchio e collegandoli con curve di Bézier morbide. Il risultato è una silhouette soffice e fluida, il tipo di forma che vedi dietro una hero di marketing, attorno a una foto profilo o come macchia di colore sullo sfondo di una landing page.

I blob stanno nel punto d'incontro perfetto tra geometria e casualità. Regola il numero di punti per ottenere forme a caramella gommosa (3-4), a sasso (5-6) o caotiche (10+). Sposta il cursore della casualità per passare da quasi un cerchio a forme stravolte. Premi il dado per generare un nuovo seed quando vuoi.

Tutto gira nel tuo browser. Esporta come snippet SVG da copiare e incollare, come file .svg da scaricare o come valore CSS clip-path da applicare direttamente a qualsiasi elemento HTML per ritagliarlo con la forma del blob.

Cosa impari creando blob

Le curve di Bézier cubiche danno al blob la sua morbidezza: ogni coppia di punti adiacenti ha due maniglie di controllo, calcolate in modo che la tangente sia continua in ogni giunzione.
Le spline Catmull-Rom (usate qui) ricavano automaticamente quelle maniglie dai punti vicini, così non devi regolare a mano i punti di controllo per mantenere la curva morbida.
Il CSS clip-path: path(...) può applicare la forma di un blob a qualsiasi elemento (immagine, div, video) senza modificarne il box di layout.
Un blob renderizzato in SVG si ridimensiona all'infinito senza pixel visibili, a differenza di un PNG, e pesa solo qualche centinaio di byte.

Come generare un blob passo per passo

Scegli il numero di punti
Pochi punti (3-5) creano blob a caramella gommosa. Più punti (8-12) creano forme a sasso, più irregolari.
Imposta la casualità
0% è un cerchio. 50% dà curve morbide a forma di blob. 100% dà silhouette molto distorte e d'effetto.
Scegli un colore o un gradiente
Usa un riempimento pieno, oppure attiva Gradiente e scegli due colori e un angolo. Si abbina ai pattern più diffusi per le sezioni hero.
Genera ed esporta
Premi il dado per generare un nuovo seed. Quando ti piace, copia l'SVG, copia il clip-path CSS o scarica il file .svg.

Dove i blob funzionano meglio

Tre modi comuni di usare un blob e a cosa fare attenzione.

Caso d'uso	Come applicarlo	Attenzione a
Sfondo hero	Incorpora l'SVG, posizionato in modo assoluto dietro al contenuto	Mantieni il contrasto: il testo sopra il blob deve avere un colore leggibile
Maschera per immagini	Applica CSS clip-path: path('…') all'<img>	L'immagine viene comunque scaricata: il ritaglio è solo visivo
Forma dell'avatar	Avvolgi la foto profilo in un div con clip-path	Usa solo border-radius se basta un cerchio: clip-path costa di più da ridisegnare
Divisore di sezione	Allunga un blob largo lungo il fondo di una sezione	Usa viewBox e preserveAspectRatio così la forma resta corretta sugli schermi larghi
Accento decorativo	Inserisci più blob semitrasparenti di dimensioni diverse	Anima con moderazione: path grandi ridisegnati consumano CPU
Illustrazione di brand	Combina un blob con testo o un'icona sopra	Scegli uno stile di forma coerente per mantenere l'identità del brand

Esempi di blob da provare

Inserire un blob in una sezione hero

HTML

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Ti diamo il benvenuto su Coddy</h1></section>

CSS

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

Un SVG posizionato in modo assoluto sta dietro al titolo. Abbassa l'opacità così il testo sopra resta leggibile senza bisogno di backdrop-filter.

Ritagliare un'immagine a forma di blob

CSS

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path è supportato da tutti i browser moderni. Le coordinate del path qui presuppongono un viewBox 400×400: ridimensiona l'immagine a quel box perché il ritaglio si allinei bene.

Due blob sfumati come sfondo decorativo

HTML

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

CSS

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Sovrapporre blob sfocati crea un effetto "aurora" morbido. Tienili fuori dall'area visibile con offset negativi, così spuntano solo i bordi arrotondati.

Errori comuni con i blob SVG

Dimenticare viewBox e dare all'<svg> larghezza e altezza fisse. La forma non si adatterà in modo responsive: usa viewBox più width/height in CSS.
Animare grandi path pieni a ogni frame. La rasterizzazione dei path è costosa: usa transform/opacity oppure applica prima un blur con un filtro CSS, così se ne occupa la GPU.
Copiare l'<svg> inline in Tailwind/Bootstrap ed ereditare display: inline invece di block. Lo spazio della baseline lascia qualche pixel sotto la forma.
Usare un blob come forma di un pulsante e dimenticare che gli eventi del mouse scattano sul bounding box, non sul contorno curvo. Metti dentro un vero <button> se ti serve un hit-testing preciso.
Sovrapporre molti blob opachi con blur alto su mobile. Il costo complessivo di ridisegno può abbassare parecchio il framerate sui dispositivi meno potenti.

Domande frequenti sul generatore di blob SVG

Cos'è un blob nel design?

Un blob è una forma chiusa, organica e asimmetrica fatta di curve morbide. È molto usato nel web design moderno (sfondi hero, badge, maschere per avatar) perché risulta più accogliente di un cerchio e più curato di una forma a mano libera.

Posso usare l'SVG generato a scopo commerciale?

Sì. L'output è solo markup SVG che hai generato tu: non ha licenze e non richiede attribuzione. Usalo in siti commerciali, app, presentazioni, ovunque.

Posso modificare il path dopo averlo copiato?

Sì, l'output è un normale <path d="…"> SVG. Aprilo in Figma, Illustrator, Inkscape o qualsiasi editor vettoriale per ritoccare i punti di controllo. Oppure rigenera qui e copia una forma nuova.

Come uso l'output CSS clip-path?

Applica clip-path: path('M … Z') a qualsiasi elemento HTML. Le coordinate del path sono nello stesso spazio del viewBox SVG (qui 400×400 per impostazione predefinita), quindi dimensiona l'elemento ritagliato su quel box perché il ritaglio si allinei, oppure scala le coordinate del path.

Math.random dà la stessa forma a ogni visita?

No, ma questo strumento usa un generatore pseudocasuale con seed. Lo stesso seed produce sempre lo stesso blob: puoi premere Genera finché trovi una forma che ti piace, e l'output SVG manterrà esattamente quella forma per sempre.

I blob rallentano la mia pagina?

Un singolo blob SVG statico praticamente non costa nulla. Più blob animati con filtri blur possono diventare pesanti su mobile: misura le prestazioni con i DevTools e preferisci animazioni di transform/opacity a quelle sugli attributi del path.