SVG Golf Generator
Gratis online SVG-golfgenerator: stapel 1-5 lagen zachte golven, stel basislijn, amplitude, golflengte en vloeiendheid in, pas een tweekleurig verloop toe en exporteer de vectorcode.
Wat doet de SVG-golfgenerator?
Hij maakt decoratieve golfvormen als kant-en-klare SVG-code. Je kunt 1-5 lagen stapelen, elk met eigen basislijnhoogte, amplitude, golflengte en vloeiendheid, en ze allemaal vullen met één gedeeld tweekleurig lineair verloop.
Hoe worden de golfcurven getekend?
Elke laag komt uit een ingebouwde padgenerator: de golf wordt opgesplitst in segmenten van een halve golflengte en elk segment wordt getekend met kubische Bézier-controlepunten. Het bestand blijft minuscule en perfect vloeiend op elke zoomniveau.
Wat verandert de vloeiendheidsschuif?
Op 0% worden de segmenten rechte lijnen en lijkt de golf een zigzag. Door hoger te zetten schuiven de Bézier-controlepunten naar buiten en op 100% krijg je volledige sinusbewerkingen.
Waar kan ik de geëxporteerde SVG gebruiken?
Overal waar HTML of SVG geldt: hero-achtergronden, scheidingen tussen paginasecties, footers, presentaties en designprogramma's. Plak de gekopieerde code direct in je HTML of sla het .svg-bestand op via de downloadknop.
Blijft de golf op elke grootte scherp?
Ja. De export behoudt een viewBox van 1440x480, de afbeelding is pure vectorgeometrie. Rek het uit naar 100% paginabreedte of schaal op voor druk — de curven vervagen nooit.
Hoe werkt de willekeurig-knop?
Hij kiest een nieuw willekeurig aantal lagen tussen 1 en 5, nieuwe willekeurige waarden voor elke parameter en twee harmonische willekeurige kleuren, en tekent de preview direct opnieuw. Blijf drukken tot het bevalt.
Kan ik mijn merkkleuren gebruiken?
Ja. De twee kleurkiezers stellen het begin- en eindpunt van het lineaire verloop in dat alle lagen delen; wijzigen herkleurt de hele golfgroep in één keer.
Worden gegevens naar een server gestuurd?
Nee. De generator draait volledig in je browser met puur JavaScript. Je kleuren en instellingen verlaten de pagina nooit en het geëxporteerde bestand wordt lokaal op je apparaat gemaakt.
Hoe SVG Golf Generator te gebruiken
De SVG-golfgenerator maakt gelaagde golfvormen als schone, kant-en-klare SVG-code. Elke laag is een vloeiende kubische Bézier-curve gevuld met een gedeeld tweekleurig lineair verloop, wat hem perfect maakt voor hero-sectie-achtergronden, paginascheidingen en footerdecoraties. Alles wordt in je browser gegenereerd — niets wordt geüpload.
- Kies hoeveel lagen (1-5) je wilt in de Lagen-keuze. De lagen worden van achter naar voor getekend, dus elke nieuwe laag schildert over de vorige.
- Kies de verloopbegin- en eindkleur met de twee kleurkiezers — alle lagen delen dit lineaire verloop.
- Stel elke laag fijn af met zijn vier schuiven: Baseline-hoogte beweegt de golf op of neer, Amplitude bepaalt hoe hoog de kammen zijn, Golflengte regelt de horizontale afstand tussen de kammen, en Vloeiendheid mengt van rechte zigzaglijnen (0%) tot volledige sinusvormige kubische Bézier-curven (100%).
- Druk op Willekeurig om meteen een frisse combinatie van laagaantallen, vormen en kleuren te genereren tot iets goed lijkt.
- Druk op SVG downloaden om een .svg-bestand op te slaan, of Kopieer code om de volledige SVG-opmaak op je klembord te zetten, klaar om in elk HTML-bestand of ontwerpgereedschap te plakken.
Voor paginascheidingen op websites zet je de SVG tussen twee blokken en laat je hem tot 100% breedte uitrekken — de viewBox houdt de curven bij elke grootte vervormingsvrij. Lage vloeiendheid met korte golflengten geeft een handgetekende look, terwijl volledige vloeiendheid met lange golflengten lijkt op een kalme zee.
Gerelateerde tools
- SVG-optimalisator Optimaliseer en comprimeer SVG-bestanden direct in uw browser. Verwijder metadata, opmerkingen en editor-data, verklein tot 60%.
- SVG naar PNG Converter Converteer SVG direct naar PNG, JPEG of WebP in uw browser. Pas schaal, grootte en achtergrondkleur aan. Gratis, privé, geen upload nodig.
- PNG naar SVG Converter Gratis online PNG naar SVG-converter. Transformeer PNG, JPG en andere bitmaps naar schaalbare vector-SVG met kleur- en detailcontrole - volledig in je browser.
- Border Radius Generator Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
- CSS Clip-path Generator Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.