Generatore di blob SVG
Genera forme blob SVG organiche e casuali a partire dalle impostazioni di complessità e contrasto, rigenera variazioni con un seme, vedile in anteprima in tempo reale e copia l'SVG o il clip-path CSS.
Generatore di blob SVG — Imposta quanti punti ha la forma (complessità) e quanto sono irregolari i suoi bordi (contrasto), poi premi Rigenera per ottenere una nuova variazione casuale dal seme successivo. Un'anteprima in tempo reale mostra il blob mentre lo regoli, e ottieni sia il markup SVG completo sia un clip-path CSS pronto da incollare in un foglio di stile. Tutto viene calcolato nel tuo browser con un generatore casuale basato su seme; nessuna forma, colore o impostazione lascia mai il tuo dispositivo.
Cos'è Generatore di blob SVG?
Il Generatore di blob SVG è uno strumento gratuito nel browser per designer e sviluppatori front-end che vogliono forme blob morbide e organiche per sfondi, sezioni hero, avatar o accenti decorativi senza disegnarle a mano. Controlli due valori: la complessità (il numero di punti di ancoraggio attorno alla forma) e il contrasto (quanto ogni punto si discosta da un cerchio perfetto). Un seme nello stato, incrementato dal pulsante Rigenera, ti permette di scorrere infinite variazioni mantenendo fissi complessità e contrasto. L'output viene reso come un unico tracciato di Bézier chiuso e fluido, così puoi copiare un markup SVG pulito, ottenere una regola CSS clip-path() per mascherare qualsiasi elemento o scaricare un file .svg pronto all'uso. Usalo per creare rapidamente decorazioni in linea con il brand o per imparare come i tracciati blob sono costruiti a partire da punti attorno a un cerchio.
Come usare Generatore di blob SVG
- Apri le Impostazioni e imposta la complessità (numero di punti, 3-16) della forma.
- Imposta il contrasto (0-100) per controllare quanto sono irregolari e ondulati i bordi.
- Scegli un colore di riempimento con il campione di colore o digitando un valore HEX.
- Fai clic su Rigenera per ottenere una nuova variazione casuale dal seme successivo finché la forma non ti piace.
- Copia il markup SVG o la regola clip-path CSS, oppure fai clic su Scarica per salvare un file .svg.
Esempi
Blob di sfondo morbido
Imposta la complessità a 6 e il contrasto a circa 40 per un blob morbido e arrotondato, poi rigenera qualche volta finché non trovi una forma piacevole per uno sfondo hero o di card.
Forma organica appuntita
Aumenta la complessità a 12 e il contrasto a 80 per una sagoma più frastagliata ed energica, utile per badge o illustrazioni giocose.
Maschera con clip-path CSS
Copia la regola clip-path: path('...') generata e applicala a un'immagine o a un div in modo che l'elemento venga ritagliato secondo il contorno del blob.
Domande frequenti
- Cosa controllano complessità e contrasto?
- La complessità è il numero di punti di ancoraggio distribuiti uniformemente attorno a un cerchio (da 3 a 16): più punti creano un contorno più dettagliato. Il contrasto è quanto ogni punto viene spinto casualmente verso l'interno o l'esterno rispetto al raggio di base (da 0 a 100), quindi 0 è vicino a un semplice cerchio e 100 è molto irregolare.
- Come funziona il pulsante Rigenera?
- Ogni blob è costruito a partire da un seme numerico più la tua complessità e il tuo contrasto. Rigenera aumenta il seme di uno e ricalcola la forma, così ottieni una nuova variazione casuale a ogni clic mentre complessità, contrasto e colore restano invariati.
- Qual è la differenza tra l'output SVG e quello clip-path?
- L'output SVG è un file <svg> completo e autonomo che puoi incorporare o scaricare. L'output clip-path è una singola regola CSS che usa path() e che puoi applicare a qualsiasi elemento HTML per ritagliarlo secondo lo stesso contorno del blob.
- Posso cambiare il colore e scaricare il file?
- Sì. Imposta il colore di riempimento con il campione di colore o un valore HEX; l'anteprima, l'SVG e il download lo usano tutti. Fai clic su Scarica per salvare un file blob.svg generato interamente nel tuo browser.
- Le mie forme o impostazioni vengono inviate a un server?
- No. Il blob viene generato con una funzione casuale locale basata su seme e tutte le stringhe SVG e clip-path vengono costruite nel tuo browser. Niente viene caricato, quindi lo strumento funziona offline e il tuo lavoro resta privato.
Strumenti correlati
Codice in immagine
Trasforma uno snippet di codice in un'immagine con evidenziazione della sintassi nel tuo browser, con oltre 20 linguaggi, temi e sfondi personalizzati, numeri di riga ed esportazione PNG o SVG.
Verificatore di contrasto dei colori
Controlla il contrasto WCAG 2.1 e il punteggio APCA Lc tra testo e sfondo, vedi i badge AA, AAA e 3:1 e applica il colore conforme più vicino.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala OKLCH, HSL o RGB con livelli regolabili, suggerimenti di contrasto WCAG per livello ed esportazione in CSS, Tailwind e JSON.