Generatore SVG: blob, onde, motivi e sfumature

Generare un blob, un'onda o un pattern SVG: metodo ed esportazioni

Il generatore calcola tracciati vettoriali a partire da un seme casuale: stesso seme e stesse impostazioni danno esattamente lo stesso file. Sono disponibili sei modalità (blob, onde, pattern ripetitivo, gradiente a maglia, curve topografiche, badge), esportabili in SVG, in componente React, come sfondo CSS, in data URI o in PNG fino a 4 volte la dimensione. Il blob predefinito pesa meno di 1 KB.

Come si costruisce un blob

Lo strumento distribuisce N punti su un cerchio (N = complessità, da 3 a 16) il cui raggio vale il 35% del lato più corto. Ogni raggio viene spostato a caso in un intervallo di ± (casualità ÷ 10) × 22,5% del raggio, senza scendere sotto i 20 px. I punti sono poi collegati da una curva di Catmull-Rom convertita in segmenti di Bézier cubici, la cui tensione segue l'impostazione «arrotondamento». Il caso proviene da un generatore pseudocasuale deterministico (Mulberry32) inizializzato dal seme.

Esempio

Impostazioni predefinite: tela di 600 × 600 px, 8 punti, casualità 6, seme 42. Il raggio di base vale 210 px, ogni punto si discosta al massimo di 28,35 px, e il tracciato conta 8 segmenti di Bézier. Il file SVG pesa 952 byte con il suo gradiente lineare a tre colori; in data URI base64 passa a circa 1.300 caratteri, un terzo in più. Il seme 43 dà un'altra forma; il seme 42 restituisce sempre la stessa.

Opzioni e limiti

• Effetti: grana (filtro di rumore frattale), ombra esterna, rotazione, specchio, 12 palette e 10 preset.
• L'animazione aggiunge regole CSS al file: funziona in un browser ma non nella maggior parte dei software di impaginazione né nell'esportazione PNG, che blocca un'immagine.
• La grana e la sfocatura del gradiente a maglia si basano su filtri SVG, costosi da visualizzare su superfici grandi o su smartphone.
• Il componente React si ottiene convertendo il testo SVG: rileggilo prima di integrarlo in un progetto tipizzato.

Tutto viene calcolato nel tuo browser; nessuna immagine viene inviata a un server.

Domande frequenti

Come ritrovare esattamente la stessa forma SVG?

Annota il seed mostrato (42 per impostazione predefinita) e le tue impostazioni: il generatore pseudocasuale dello strumento produce sempre lo stesso tracciato per lo stesso seed. Cambiare solo il seed, per esempio 43, dà una nuova forma con gli stessi parametri. Il pulsante di estrazione casuale sceglie un seed tra 0 e 99.999.

Conviene esportare in SVG o in PNG?

L'SVG resta nitido a qualsiasi dimensione e spesso pesa meno di 1 KB per un blob semplice (952 byte con le impostazioni predefinite). Il PNG va bene per gli strumenti che non accettano il vettoriale; lo strumento lo esporta a 1x, 2x o 4x la dimensione della tela, cioè 2.400 × 2.400 px a 4x per una tela di 600 px. L'animazione si perde in PNG.

Come usare il blob come sfondo di pagina in CSS?

Scegli il formato CSS: lo strumento comprime l'SVG, lo codifica in data URI e fornisce una regola background-image con background-size: cover e centratura. Incollala nel foglio di stile della tua sezione. Il formato data URI in base64 pesa circa un terzo in più dell'SVG originale.

L'animazione funziona ovunque?

L'animazione è scritta in CSS (keyframes) all'interno del file SVG. Funziona quando l'SVG è visualizzato in un browser, ma Figma, Illustrator o PowerPoint in genere la ignorano, e l'esportazione in PNG conserva solo un'immagine fissa. La velocità si regola tra 2 e 16 secondi per ciclo.

Lo strumento è davvero gratuito?

Sì, tutti gli strumenti di Kristools sono gratuiti al 100% e accessibili senza registrazione.

I miei dati sono protetti?

Sì. Tutte le elaborazioni vengono eseguite direttamente e in modo sicuro nel tuo browser. Nessun dato personale viene inviato ai nostri server.