SVG Golf Generator
Genereer vloeiende SVG-golfscheidingen voor sectieovergangen op je website.
① Pas hoogte, amplitude en kleur aan ② Bekijk de golf live ③ Kopieer SVG of HTML-snippet
Hoogte (px) 120
Amplitude (px) 40
Golven 2
Golfkleur
#C9B89A
Achtergrond
#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>
Wat zijn SVG-golfscheidingen en hoe gebruik je ze?
SVG-golfscheidingen zijn schaalbare vectorafbeeldingen voor vloeiende overgangen tussen secties. In tegenstelling tot PNG/JPG zijn SVG-golven resolutieonafhankelijk en schalen ze perfect op elk scherm. De golfvorm wordt gedefinieerd door een <path>-element in een <svg> met kwadratische Bézier-curves (commando Q). Het attribuut preserveAspectRatio="none" zorgt ervoor dat de golf altijd de volledige breedte beslaat.
Veelgestelde vragen
Een SVG-golfscheiding is een schaalbare vectorafbeelding als visuele scheiding tussen secties. Het is een gevulde vorm met een gebogen bovenrand die perfect schaalt.
Kopieer het HTML-snippet en plak het onderaan een sectie. Gebruik width="100%" en preserveAspectRatio="none" om het aan elke breedte aan te passen.
De amplitude regelt de hoogte van de golfpieken. Typische waarden: 20px (subtiel) tot 80px (dramatisch).
De frequentie regelt hoeveel volledige golven verschijnen. 1 = zachte S-curve, 2–3 = typisch golfpatroon, 4+ = veel kleine golven.
Vloeiende golven (kwadratische Bézier-curves) zijn de meest voorkomende keuze. Hoekige golven creëren een geometrisch, kristallijn effect.
De spiegel-toggle spiegelt de golf verticaal. Normaal = gevuld gebied onderaan. Gespiegeld = gevuld gebied bovenaan.
Ja. Pas een CSS-animatie toe met translateX() op een breder viewBox. Verdubbel de viewBox-breedte naar 2880 en herhaal het pad.