Generatore di Onde SVG
Generatore di onde SVG gratuito online: sovrapponi 1-5 livelli di onde morbide, regola linea di base, ampiezza, lunghezza d'onda e morbidezza, applica un gradiente a due colori ed esporta il codice vettoriale.
Cosa fa il generatore di onde SVG?
Crea forme ondulate decorative come codice SVG pronto all'uso. Puoi sovrapporre da 1 a 5 livelli, ognuno con altezza della linea di base, ampiezza, lunghezza d'onda e morbidezza propri, e riempirli tutti con un gradiente lineare a due colori condiviso.
Come vengono tracciate le curve?
Ogni livello è prodotto da un generatore di path interno: l'onda è divisa in segmenti di mezza lunghezza d'onda e ogni segmento è disegnato con punti di controllo Bézier cubici. Il file resta minuscolo e perfettamente fluido a qualsiasi zoom.
Cosa cambia il cursore di morbidezza?
Al 0% i segmenti diventano linee rette e l'onda sembra uno zigzag. Aumentando, i punti di controllo Bézier si allargano e al 100% ottieni curve sinusoidali complete.
Dove posso usare l'SVG esportato?
Ovunque sia accettato HTML o SVG: sfondi hero, separatori tra sezioni, piè di pagina, presentazioni e strumenti di design. Incolla il codice copiato direttamente nel tuo HTML o salva il file .svg dal pulsante di download.
L'onda resta nitida a qualsiasi dimensione?
Sì. L'export mantiene un viewBox di 1440x480: la grafica è pura geometria vettoriale. Stirala al 100% della larghezza pagina o ingrandiscila per la stampa, le curve non si sfoocano mai.
Come funziona il pulsante Casuale?
Sceglie un numero di livelli casuale tra 1 e 5, nuovi valori casuali per ogni parametro e due colori armonici casuali, poi ridisegna l'anteprima all'istante. Premilo finché il risultato non ti piace.
Posso usare i colori del mio brand?
Certo. I due selettori colore impostano i punti di inizio e fine del gradiente lineare condiviso da tutti i livelli: cambiarli ricolora l'intero gruppo di onde in una volta.
Vengono inviati dati a un server?
No. Il generatore funziona interamente nel browser con JavaScript puro. Colori e impostazioni non lasciano mai la pagina e il file esportato viene creato localmente sul tuo dispositivo.
Come usare Generatore di Onde SVG
Il generatore di onde SVG crea forme d'onda a livelli come codice SVG pulito, pronto da incollare. Ogni livello è una curva cubica di Bézier morbida riempita con un gradiente lineare a due colori condiviso, che la rende perfetta per sfondi di sezioni hero, divisori di pagina e decorazioni a piè di pagina. Tutto viene generato nel tuo browser — non viene caricato nulla.
- Scegli quanti livelli (1-5) vuoi nel selettore Livelli. I livelli sono disegnati dal fondo verso la parte anteriore, quindi ogni nuovo livello dipinge sui precedenti.
- Scegli i colori di inizio e fine del gradiente con i due selettori colore — tutti i livelli condividono questo gradiente lineare.
- Regola finemente ogni livello con i suoi quattro cursori: l'altezza della linea di base sposta l'onda su o giù, l'ampiezza definisce quanto sono alte le creste, la lunghezza d'onda controlla la distanza orizzontale tra le creste, e la morbidezza sfuma da linee a zigzag rette (0%) a curve sinusoidali complete in Bézier cubica (100%).
- Premi Randomizza per generare all'istante una combinazione fresca di numero di livelli, forme e colori finché qualcosa non sembra giusto.
- Premi Scarica SVG per salvare un file .svg, o Copia codice per mettere il markup SVG completo negli appunti, pronto da incollare in qualsiasi file HTML o strumento di design.
Per i divisori di sezione web, metti l'SVG tra due blocchi e lascialo allargare al 100% della larghezza — il viewBox mantiene le curve senza distorsioni a qualsiasi dimensione. Una morbidezza bassa con lunghezze d'onda corte dà un aspetto disegnato a mano, mentre la morbidezza piena con lunghezze lunghe sembra un mare calmo.
Strumenti correlati
- Ottimizzatore SVG Ottimizza e comprimi file SVG istantaneamente nel browser. Rimuovi metadati, commenti e dati dell'editor, riduci le dimensioni fino al 60%.
- Convertitore SVG in PNG Converti SVG in PNG, JPEG o WebP istantaneamente nel browser. Personalizza scala, dimensioni e colore di sfondo. Gratuito, privato, nessun caricamento.
- Convertitore PNG in SVG Convertitore PNG in SVG gratuito online. Trasforma PNG, JPG e altre bitmap in SVG vettoriale scalabile con controllo di colori e dettagli, tutto nel tuo browser.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.
- Generatore Clip Path CSS Generatore online gratuito di clip-path CSS. Crea forme polygon, circle, ellipse e inset con punti trascinabili, anteprima live e copia del codice CSS in un clic.