Generatore Blob

Genera forme blob organiche casuali come SVG. Personalizza complessità e casualità, scegli il colore, poi scarica o copia il codice SVG.

SVG istantaneoCopia pathDownload gratuito

① Regola complessità, casualità e colore ② Clicca Randomizza per generare ③ Copia SVG o scarica PNG

Complessità (punti)6

Casualità50

Seed

Colore di riempimento#C9B89A

Come funziona

Il blob è costruito da N punti equidistanti su un cerchio, ciascuno spostato verso l'interno o verso l'esterno di una quantità casuale. Curve di Bézier cubiche connettono i punti tramite conversione Catmull-Rom.

Complessità

Controlla il numero di punti di ancoraggio (6–10). Più punti creano silhouette più intricate e irregolari. Meno punti producono blob più semplici e arrotondati.

Casualità

Controlla quanto ogni punto può deviare dal raggio del cerchio base. 0 produce un cerchio perfetto; 100 produce la massima irregolarità organica.

Cos'è una forma blob e come si genera?

Le forme blob sono silhouette morbide, organiche, simili ad amebe, molto usate nel web design moderno per sfondi, illustrazioni, avatar e accenti UI. Si generano algoritmicamente distribuendo punti di ancoraggio attorno a un cerchio a intervalli angolari uguali, poi spostando ogni punto radialmente. Le curve di Bézier cubiche — calcolate tramite la conversione Catmull-Rom — connettono i punti in modo fluido. Il risultato è un path SVG incorporabile in HTML o CSS tramite background-image, clip-path o <svg> inline, esportabile in Figma, Illustrator e Inkscape. Ideali per sfondi hero, decorazioni card, cornici avatar e basi illustrative.

Domande frequenti

Una forma blob è una silhouette morbida, organica e arrotondata che ricorda un'ameba naturale. A differenza delle forme geometriche (cerchi, quadrati), i blob hanno contorni irregolari e fluidi che sembrano organici e giocosi. Sono ampiamente utilizzati nel web design moderno per sfondi, illustrazioni e decorazioni UI.

I blob vengono creati posizionando N punti di ancoraggio a intervalli angolari uguali attorno a un cerchio. Ogni punto viene poi spostato casualmente verso l'interno o l'esterno di una quantità configurabile. Le curve di Bézier cubiche — derivate usando la conversione da spline Catmull-Rom a Bézier — connettono tutti i punti in un path chiuso e fluido.

La complessità controlla il numero di punti di ancoraggio (6–10). Più punti consentono variazioni locali maggiori e silhouette più intricate. La casualità controlla l'entità dello spostamento di ogni punto dal cerchio base. A 0 tutti i punti giacciono sul cerchio producendo quasi un cerchio perfetto; a 100 i punti deviano al massimo.

Il tool produce un path SVG standard con curve di Bézier cubiche usando il comando "C". Il markup completo è un elemento <svg> con viewBox "0 0 300 300". Il path usa coordinate assolute e termina con "Z" per chiudere la forma. Puoi incollarlo direttamente in HTML, Figma, Illustrator o qualsiasi tool compatibile con SVG.

La forma generata è deterministica dati lo stesso seed, complessità e casualità. Casualità molto alta con bassa complessità può occasionalmente produrre path auto-intersecanti. Le forme sono generate in un viewBox 300×300, ma SVG scala infinitamente senza limite di risoluzione.

Puoi usare l'SVG scaricato come sorgente <img>, come background-image CSS, o inline il codice <svg> direttamente nel tuo HTML. In CSS puoi applicare clip-path con la funzione path() usando la stringa del path copiato. I blob funzionano ottimamente come sfondi, accenti hero, maschere per immagini e sfondi card.

Sì. SVG e le curve di Bézier cubiche sono supportate in tutti i browser moderni (Chrome, Firefox, Safari, Edge). Il file scaricato è un semplice file XML SVG compatibile con tutti i tool di design inclusi Figma, Adobe Illustrator, Inkscape e Sketch.

Cos'è una forma blob e come si genera?

Domande frequenti

Esplora il Nostro Network