SVG Golfgenerator

Gelaagde SVG-golven voor moderne lay-outs

Golfscheidingen zijn een populaire manier om de overgang tussen twee secties van een webpagina te verzachten. In plaats van een harde horizontale lijn voegt een gebogen rand beweging en diepte toe aan herobanners, footers, prijstabellen en landingspagina's. Deze SVG-golfgenerator bouwt die vormen voor je. Hij stapelt meerdere doorschijnende of dekkende lagen, elk met een eigen willekeurige curve, en laat ze overlopen tussen twee kleuren, zodat het resultaat eruitziet als glooiende heuvels of water.

Omdat de uitvoer gewone SVG is, blijft hij scherp op elk formaat, weegt hij maar een paar honderd bytes en kun je hem stylen, animeren of inline in je HTML plaatsen. Je kunt hem ook kopiëren als CSS-data-URI voor background-image, wat handig is als je geen extra bestanden aan een project kunt toevoegen.

Wat de instellingen veranderen

Lagen bepaalt hoeveel overlappende golven er worden getekend, van één strakke curve tot zes gestapelde banden. Amplitude regelt hoe hoog de toppen en dalen zijn. Complexiteit is het aantal toppen over de breedte: lage waarden geven een lange, trage deining, hoge waarden een woelige zee. Vloeiendheid bepaalt hoe de punten met elkaar worden verbonden: bij 0% is de golf hoekig als een zigzag, bij 100% wordt het een ronde curve die bestaat uit kubische Bézier-segmenten. De vulling kan een mengeling van twee effen kleuren zijn, één per laag, of een horizontaal verloop waarvan de dekking naar voren toe toeneemt.

Je golf gebruiken en exporteren

Elke golf wordt gegenereerd vanuit een numerieke seed, dus een ontwerp is volledig reproduceerbaar: noteer de seed en de waarden van de schuifregelaars en je kunt het later opnieuw maken. Gebruik Flip vertically (verticaal spiegelen) voor golven die aan de bovenkant van een sectie hangen, en schakel een transparante achtergrond in als de SVG boven op een andere kleur moet liggen. Download de SVG voor het web, of exporteer een PNG van 1440 bij 480 pixels voor presentaties en ontwerptools. Rek de SVG bij het plaatsen op een pagina uit tot de volledige breedte en geef de sectie dezelfde achtergrondkleur als de golf om dunne naden te voorkomen. Alles wordt lokaal in je browser berekend, dus er is geen upload en geen account nodig.