Design / SVG

Generatore di onde SVG per separare le sezioni

Genera onde SVG fluide e sovrapposte per il bordo tra due sezioni della pagina: scegli il numero di livelli e di onde, l'altezza, la morbidezza e il colore, poi scarica l'SVG o copialo come sfondo CSS.

Generatore di onde SVG per separare le sezioni: Ogni livello è una fila di punti che si alternano sopra e sotto una linea di base di una quantità casuale, collegati da una curva morbida e riempiti fino al bordo inferiore. I livelli sullo sfondo sono più chiari, così si crea un effetto di profondità. L'SVG si adatta a qualsiasi larghezza e la versione CSS lo incorpora come sfondo tramite un URI di dati. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Generatore di onde SVGElaborazione locale

Funziona interamente nel browser

Livelli3Onde trasversali3Altezza delle onde60%Uniformità1Altezza dell’immagine240 pxColore#479d1d Capovolgi (per la parte superiore di una sezione)

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>

CSS

.wave {
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

L’SVG si adatta a qualsiasi larghezza (preserveAspectRatio="none"), quindi è ideale per divisori a tutta larghezza tra le sezioni. Posizionalo in fondo a una sezione usando il colore di sfondo della sezione successiva, oppure capovolgilo per usarlo in alto. Lo stesso seed casuale disegna sempre la stessa onda.

SVG o CSS?

Un SVG inline può essere stilizzato e animato con CSS e il suo fill può usare currentColor. Come sfondo CSS, l'SVG è un URI di dati: non c'è nulla di aggiuntivo da caricare, ma il colore è fisso nel codice. Il file occupa poche centinaia di byte in entrambi i casi; puoi ottimizzarlo ulteriormente con lo strumento di pulizia SVG.

Morbidezza

La curva è una spline Catmull-Rom convertita in segmenti Bézier cubici: alla massima morbidezza passa dolcemente attraverso ogni punto, mentre a zero diventa una serie di linee rette tra i punti, creando un bordo frastagliato simile a una montagna.

Come usarlo

Imposta i livelli, il numero di onde e la loro altezza.
Scegli un colore e capovolgi l'onda per usarla nella parte superiore di una sezione.
Fai clic per creare nuove onde casuali, poi scarica l'SVG o copia il CSS.

Privacy e limitazioni

Le onde vengono disegnate nel tuo browser.

Strumenti correlati

Domande frequenti

Come posso usarlo tra due sezioni?

Assegna all'onda il colore della sezione sottostante e posizionala a tutta larghezza sul fondo della sezione sovrastante; capovolgila per usarla invece nella parte superiore di una sezione.

Le stesse impostazioni producono la stessa onda?

Sì: la forma deriva da un seed casuale, quindi cambia solo quando fai clic per creare una nuova onda.

Posso usare le onde per scopi commerciali?

Sì: le forme vengono generate per te e non sono soggette a restrizioni di licenza.

Strumento gratuito · nel browser esecuzioni · senza account