SVG-golfgenerator
Genereer gelaagde SVG-golfvormen met instelbare curve-intensiteit, aantal lagen en effen of verloopvulling, kopieer vervolgens de code of download een .svg-bestand.
SVG-golfgenerator — Stel de curve-intensiteit in, kies hoeveel golflagen je stapelt en selecteer een effen vulling of een verticaal verloop van boven naar beneden met twee kleuren. Een live voorbeeld wordt opnieuw getekend terwijl je aan de instellingen draait, de knop Opnieuw genereren herschikt de golfvorm vanuit een seed, en de volledige SVG-code staat klaar om te kopiëren of als .svg-bestand te downloaden. Alles wordt direct in je browser gegenereerd; er worden nooit instellingen of afbeeldingen naar een server gestuurd.
Wat is SVG-golfgenerator?
De SVG-golfgenerator is een gratis browsertool voor webdesigners en front-end-ontwikkelaars die soepele, organische golfscheidingen en hero-achtergronden willen zonder paden met de hand te tekenen. Je stelt de curve-intensiteit in, stapelt van één tot acht lagen, draait de golf om zodat de top naar beneden of naar boven wijst, en vult hem met een mengsel van één kleur of een verticaal verloop tussen twee HEX-kleuren. Elke golf wordt opgebouwd met een seed-gebaseerde pseudowillekeurige generator, dus op Opnieuw genereren drukken geeft je een verse vorm terwijl dezelfde instellingen behouden blijven, en de uitvoer is exacte, schaalbare SVG die je in elke HTML-pagina of designbestand kunt plakken. Gebruik het voor sectiescheidingen, footers, banners en decoratieve achtergronden.
SVG-golfgenerator gebruiken
- Stel de curve-intensiteit in van 0 tot 100 om te bepalen hoe hoog en opvallend de golftoppen zijn.
- Kies het aantal lagen (1-8); meer lagen stapelen doorschijnende golven voor diepte.
- Gebruik Omdraaien om de golftop naar beneden of naar boven te laten wijzen.
- Open Instellingen om te wisselen tussen een effen vulling en een verticaal verloop en kies de begin- en eindkleur.
- Druk op Opnieuw genereren om de golfvorm te herschikken tot je tevreden bent.
- Kopieer de SVG-code of klik op Downloaden om een wave.svg-bestand op te slaan.
Voorbeelden
Sectiescheiding met verloop
Zet de intensiteit rond 50, houd 3 lagen aan, kies een verloopvulling van blauw naar paars en download wave.svg om een soepele scheiding tussen twee paginasecties te plaatsen.
Krachtige hero-golf in één kleur
Draai de intensiteit omhoog, zet de lagen op 1, schakel over naar een effen vulling en draai de golf naar boven voor een grote, opvallende top achter een hero-kop.
Gelaagde footerachtergrond
Gebruik 5-6 lagen met een lage tot middelhoge intensiteit om een zachte, gestapelde doorschijnende golf op te bouwen die goed werkt als footerachtergrond.
Veelgestelde vragen
- Wat verandert de curve-intensiteit?
- De intensiteit (0-100) bepaalt hoe ver elke golftop rijst en daalt. Lage waarden geven zachte rimpelingen; hoge waarden geven hoge, opvallende pieken. Het voorbeeld en de SVG worden direct bijgewerkt terwijl je het wijzigt.
- Waarom verandert de vorm als ik op Opnieuw genereren druk?
- Elke golf wordt getekend met een seed-gebaseerde pseudowillekeurige generator. Opnieuw genereren verhoogt de seed, zodat je een nieuwe ordening van toppen krijgt terwijl je intensiteit, lagen, kleuren en vulling precies blijven zoals je ze hebt ingesteld.
- Wat is het verschil tussen effen en verloopvulling?
- Effen mengt elke gestapelde laag tussen je twee kleuren, terwijl het verloop één verticaal verloop toepast van de eerste kleur bovenaan naar de tweede onderaan over alle lagen. Open Instellingen om te wisselen en beide kleuren te kiezen.
- Hoe gebruik ik de gedownloade SVG?
- De uitvoer is standaard, schaalbare SVG-code. Kopieer hem rechtstreeks in je HTML, of download wave.svg en importeer het in je designtool of verwijs ernaar als afbeelding. Omdat het vectorieel is, blijft het scherp op elk formaat.
- Wordt er iets naar een server geüpload?
- Nee. De golf wordt volledig in je browser gegenereerd met lokale berekeningen, en de .svg-download wordt opgebouwd uit een blob in het geheugen. Geen instellingen, kleuren of afbeeldingen verlaten ooit je apparaat, dus het werkt offline en houdt je werk privé.
Gerelateerde tools
Code naar afbeelding
Zet een codefragment in je browser om in een afbeelding met syntaxisaccentuering, met 20+ talen, aangepaste thema's en achtergronden, regelnummers en PNG- of SVG-export.
Kleurcontrastcontrole
Controleer WCAG 2.1-contrast en APCA Lc-score tussen tekst en achtergrond, bekijk AA-, AAA- en 3:1-badges en pas de dichtstbijzijnde geslaagde kleur toe.
Kleurenmenger
Meng twee HEX-kleuren in een gekozen verhouding in de RGB- of Lab-kleurruimte en lees de resulterende tussenkleur terug als staal en kopieerbare HEX-waarde.
Kleurtinten-generator
Zet één HEX-basiskleur om in een OKLCH-, HSL- of RGB-schaal met instelbare stappen, WCAG-contrasttips per stap en export naar CSS, Tailwind en JSON.