SVG-vågsgenerator

SVG-vågor i lager för moderna layouter

Vågavdelare är ett populärt sätt att mjuka upp gränsen mellan två sektioner på en webbsida. I stället för en hård horisontell linje ger en böjd kant rörelse och djup åt hero-banners, sidfötter, pristabeller och landningssidor. Den här SVG-vågsgeneratorn bygger formerna åt dig. Den staplar flera genomskinliga eller heltäckande lager, vart och ett med sin egen slumpmässiga kurva, och tonar dem mellan två färger så att resultatet ser ut som böljande kullar eller vatten.

Eftersom utdata är ren SVG förblir den skarp i alla storlekar, väger bara några hundra byte och kan stylas, animeras eller bäddas in direkt i din HTML. Du kan också kopiera den som en CSS-background-image i form av en data-URI, vilket är praktiskt när du inte kan lägga till extra filer i ett projekt.

Vad reglagen ändrar

Lager anger hur många överlappande vågor som ritas, från en enda ren kurva till sex staplade band. Amplitud styr hur höga vågtopparna och vågdalarna är. Komplexitet är antalet vågtoppar över bredden: låga värden ger långa, lugna dyningar och höga värden ger ett krabbt hav. Mjukhet styr hur punkterna sammanfogas: vid 0 % är vågen kantig som ett sicksackmönster, och vid 100 % blir den en rundad kurva uppbyggd av kubiska Bézier-segment. Fyllningen kan vara en övergång mellan två heltäckande färger, en per lager, eller en horisontell gradient med ökande opacitet mot förgrunden.

Använda och exportera din våg

Varje våg genereras från ett numeriskt frö (seed), så en design är helt reproducerbar: anteckna fröet och reglagevärdena så kan du återskapa den senare. Använd Vänd vertikalt för vågor som hänger ned från toppen av en sektion, och aktivera transparent bakgrund när SVG:n ska ligga ovanpå en annan färg. Ladda ned SVG:n för webben, eller exportera en PNG på 1440 gånger 480 pixlar för presentationer och designverktyg. När du placerar SVG:n på en sida bör du sträcka den till full bredd och ge sektionen samma bakgrundsfärg som vågens bakgrund för att undvika tunna skarvar. Allt beräknas lokalt i din webbläsare, så det sker ingen uppladdning och inget konto behövs.