Generatore Onde SVG

Genera divisori onda SVG per transizioni tra sezioni del tuo sito web.

Output SVGPersonalizzabileNo upload

① Personalizza altezza, ampiezza e colore ② Anteprima dal vivo ③ Copia SVG o snippet HTML

Altezza (px) 120
Ampiezza (px) 40
Onde 2
Colore onda
#C9B89A
Sfondo
#0E0E0E
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" width="100%" preserveAspectRatio="none"> <path d="M 0 60 Q 180 20 360 60 Q 540 100 720 60 Q 900 20 1080 60 Q 1260 100 1440 60 L 1440 120 L 0 120 Z" fill="#c9b89a"/> </svg>

Cosa sono i divisori onda SVG e come usarli?

I divisori onda SVG sono grafici vettoriali scalabili usati per creare transizioni fluide tra sezioni di una pagina web. A differenza di PNG o JPG, le onde SVG sono indipendenti dalla risoluzione e scalano perfettamente su qualsiasi schermo. Vengono tipicamente posizionati al fondo di una sezione, con il colore di riempimento che corrisponde allo sfondo della sezione successiva. La forma dell'onda è definita da un elemento <path> all'interno di un <svg> usando curve di Bézier quadratiche (comando Q) o linee rette, con l'attributo preserveAspectRatio="none" per adattarsi a qualsiasi larghezza.

Domande frequenti

Un divisore onda SVG è un grafico vettoriale scalabile usato come separatore visivo tra sezioni. È una forma riempita con il bordo superiore curvo. Essendo SVG, scala perfettamente a qualsiasi risoluzione.
Copia lo snippet HTML e incollalo in fondo a una sezione. L'onda riempie il colore della sezione successiva, creando una transizione di colore fluida. Usa width="100%" e preserveAspectRatio="none" per adattarla a qualsiasi larghezza.
L'ampiezza controlla l'altezza dei picchi e delle valli dell'onda. Valori tipici: 20px (sottile) a 80px (drammatica).
La frequenza controlla quante onde complete appaiono sulla larghezza totale. 1 = una curva S dolce, 2–3 = schema onda tipico, 4+ = molte piccole increspature.
Le curve morbide (bezier quadratica) sono la scelta più comune per i design moderni. Le onde angolari (linee rette) creano un effetto geometrico e cristallino.
L'interruttore capovolgi specchia l'onda verticalmente. Un'onda normale ha l'area riempita in basso (utile in fondo a una sezione scura). Un'onda capovolta ha l'area riempita in alto.
Sì. Applica un'animazione CSS all'elemento <svg> usando translateX() su un viewBox più largo. Raddoppia la larghezza del viewBox a 2880 e ripeti il path per un loop continuo.

Esplora il Nostro Network