Generatore di onde SVG

Onde SVG a strati per layout moderni

I divisori a onda sono un modo molto diffuso per ammorbidire il confine tra due sezioni di una pagina web. Invece di una linea orizzontale netta, un bordo curvo aggiunge movimento e profondità a banner hero, footer, tabelle prezzi e landing page. Questo generatore di onde SVG costruisce queste forme per te. Sovrappone diversi strati traslucidi o pieni, ciascuno con la propria curva casuale, e li sfuma tra due colori così che il risultato ricordi colline ondulate o l'acqua.

Poiché l'output è semplice SVG, resta nitido a qualsiasi dimensione, pesa solo poche centinaia di byte e può essere stilizzato, animato o inserito inline nel tuo HTML. Puoi anche copiarlo come data URI CSS per background-image, una soluzione comoda quando non puoi aggiungere file extra a un progetto.

Cosa modificano i controlli

Strati imposta quante onde sovrapposte vengono disegnate, da una singola curva pulita fino a sei fasce impilate. Ampiezza controlla l'altezza di creste e avvallamenti. Complessità è il numero di creste lungo la larghezza: valori bassi danno onde lunghe e pigre, valori alti un mare mosso. Morbidezza controlla il modo in cui i punti vengono uniti: allo 0% l'onda è spigolosa come uno zig-zag, al 100% diventa una curva arrotondata composta da segmenti Bézier cubici. Il riempimento può essere una sfumatura tra due colori pieni, uno per strato, oppure un gradiente orizzontale con opacità crescente verso lo strato frontale.

Usare ed esportare la tua onda

Ogni onda viene generata da un seed numerico, quindi un design è completamente riproducibile: annota il seed e i valori dei cursori e potrai ricrearlo in seguito. Usa Capovolgi verticalmente per onde che scendono dalla parte superiore di una sezione e attiva lo sfondo trasparente quando l'SVG deve stare sopra un altro colore. Scarica l'SVG per il web oppure esporta un PNG da 1440 per 480 pixel per presentazioni e strumenti di design. Quando inserisci l'SVG in una pagina, estendilo a tutta la larghezza e imposta lo sfondo della sezione in modo che corrisponda al colore di sfondo dell'onda, così eviti sottili giunture visibili. Tutto viene calcolato localmente nel tuo browser, quindi non c'è alcun caricamento e non serve alcun account.