Generatore di onde SVG
Genera forme d'onda SVG a più livelli con intensità della curva, numero di livelli e riempimento pieno o sfumato regolabili, poi copia il codice o scarica un file .svg.
Generatore di onde SVG — Imposta l'intensità della curva, scegli quanti livelli d'onda sovrapporre e seleziona un riempimento pieno o una sfumatura verticale dall'alto verso il basso con due colori. Un'anteprima dal vivo si ridisegna mentre regoli i controlli, il pulsante Rigenera rimescola la forma dell'onda a partire da un seed, e il codice SVG completo è pronto da copiare o scaricare come file .svg. Tutto viene generato direttamente nel tuo browser; nessuna impostazione o immagine viene mai inviata a un server.
Cos'è Generatore di onde SVG?
Il Generatore di onde SVG è uno strumento gratuito nel browser per web designer e sviluppatori front-end che vogliono divisori d'onda morbidi e organici e sfondi hero senza disegnare i tracciati a mano. Imposti l'intensità della curva, sovrapponi da uno a otto livelli, capovolgi l'onda così che la cresta punti verso il basso o verso l'alto, e la riempi con una miscela a colore unico o una sfumatura verticale tra due colori HEX. Ogni onda è costruita con un generatore pseudocasuale basato su un seed, perciò premere Rigenera ti dà una forma nuova mantenendo le stesse impostazioni, e l'output è un SVG preciso e scalabile che puoi incollare in qualsiasi pagina HTML o file di design. Usalo per divisori di sezione, footer, banner e sfondi decorativi.
Come usare Generatore di onde SVG
- Imposta l'intensità della curva da 0 a 100 per controllare quanto sono alte e marcate le creste dell'onda.
- Scegli il numero di livelli (1-8); più livelli sovrappongono onde traslucide per dare profondità.
- Usa Capovolgi per far puntare la cresta dell'onda verso il basso o verso l'alto.
- Apri Impostazioni per alternare tra un riempimento pieno e una sfumatura verticale e scegliere i colori iniziale e finale.
- Premi Rigenera per rimescolare la forma dell'onda finché non ti piace.
- Copia il codice SVG o fai clic su Scarica per salvare un file wave.svg.
Esempi
Divisore di sezione sfumato
Imposta l'intensità intorno a 50, mantieni 3 livelli, scegli un riempimento sfumato dal blu al viola e scarica wave.svg per inserire un divisore morbido tra due sezioni della pagina.
Onda hero monocromatica e decisa
Alza l'intensità, imposta i livelli su 1, passa a un riempimento pieno e capovolgi l'onda verso l'alto per una cresta grande e d'impatto dietro un titolo hero.
Sfondo footer a più livelli
Usa 5-6 livelli con un'intensità bassa o media per creare un'onda traslucida morbida e sovrapposta che funziona bene come sfondo del footer.
Domande frequenti
- Cosa cambia l'intensità della curva?
- L'intensità (0-100) controlla quanto ogni cresta dell'onda sale e scende. Valori bassi danno onde delicate; valori alti danno picchi alti e marcati. L'anteprima e l'SVG si aggiornano all'istante mentre la modifichi.
- Perché premere Rigenera cambia la forma?
- Ogni onda è disegnata da un generatore pseudocasuale basato su un seed. Rigenera incrementa il seed così da ottenere una nuova disposizione delle creste mantenendo intensità, livelli, colori e riempimento esattamente come impostati.
- Qual è la differenza tra riempimento pieno e sfumato?
- Il pieno fonde ogni livello sovrapposto tra i tuoi due colori, mentre la sfumatura applica un'unica sfumatura verticale dal primo colore in alto al secondo in basso su tutti i livelli. Apri Impostazioni per alternare e scegliere entrambi i colori.
- Come uso l'SVG scaricato?
- L'output è un codice SVG standard e scalabile. Copialo direttamente nel tuo HTML, oppure scarica wave.svg e importalo nel tuo strumento di design o referenzialo come immagine. Essendo vettoriale, resta nitido a qualsiasi dimensione.
- Viene caricato qualcosa su un server?
- No. L'onda è generata interamente nel tuo browser con calcoli locali, e il download .svg è costruito da un blob in memoria. Nessuna impostazione, colore o immagine lascia mai il tuo dispositivo, quindi funziona offline e mantiene il tuo lavoro 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.