Generatore di blob

Blob SVG organici in pochi secondi

I blob sono le forme morbide e irregolari che vedi dietro sezioni hero, foto profilo, illustrazioni e schermate di onboarding delle app. Spezzano le griglie rigide di rettangoli e danno a un layout un aspetto amichevole e fatto a mano. Questo generatore di blob li crea come percorsi SVG puliti: scegli pochi parametri, guarda la forma aggiornarsi e copia il codice direttamente nel tuo progetto.

Poiché un blob è un unico percorso SVG, è leggerissimo, si ridimensiona senza perdere qualità e può essere ricolorato con il CSS o animato trasformandolo tra due percorsi con lo stesso numero di punti.

Come viene costruita la forma

Il generatore colloca un numero scelto di punti di ancoraggio attorno a un cerchio. La casualità sposta ciascun punto verso l'interno di una quantità casuale diversa, mentre la dimensione scala l'intero contorno all'interno della tela. I punti di ancoraggio vengono poi collegati con una spline Catmull-Rom chiusa che viene convertita in curve Bézier cubiche, garantendo raccordi morbidi senza angoli visibili. Con tre o quattro punti ottieni semplici forme a ciottolo, mentre dieci o più punti con casualità elevata producono forme ondeggianti simili a nuvole. Con casualità allo 0% il risultato è una forma regolare arrotondata in un cerchio perfetto.

Colori, contorni e riutilizzo

Riempi il blob con un singolo colore o con un gradiente diagonale a due colori, e aggiungi un contorno da 1 a 16 pixel quando ti serve un effetto adesivo o badge. Ogni blob nasce da un seed numerico: lo stesso seed con le stesse impostazioni produce sempre la stessa forma, quindi puoi salvare il seed, modificare un valore in seguito e mantenere tutto il resto identico. Scarica un SVG per il web oppure un PNG da 800 per 800 pixel con sfondo trasparente per slide e strumenti di design. Tutta l'elaborazione avviene localmente nel tuo browser e nulla viene caricato.