Softonic

SVG-golfgenerator

Stap 1 / 2
Volgende

Gebogen golven zijn de sectiescheidingen waar elke landingspagina op een gegeven moment naar grijpt. Deze generator bemonstert een vloeiende sinuscurve tot één gevuld <path>, laat je de amplitude, frequentie en verticale positie instellen en vult het met een willekeurige effen kleur, klaar om tussen twee secties te plaatsen zonder extra CSS. Kopieer de inline SVG-code en plak hem rechtstreeks in je pagina.

Zo genereer je een SVG-golf

  1. 1

    Stel de kleur in

    Kies met de kleurkiezer een willekeurige effen vulkleur voor de golf.

  2. 2

    Pas de amplitude aan

    Verhoog de amplitude (0 tot 150) voor een diepere curve, of verlaag hem voor een zachte rimpeling.

  3. 3

    Stel de frequentie in

    Kies 1 tot 8 cycli over de breedte. Meer cycli betekent een drukker, golvender patroon.

  4. 4

    Kies boven of onder

    Veranker de vulling aan de onderrand voor een footergolf, of aan de bovenrand voor een headergolf.

  5. 5

    Kopieer de SVG

    Kopieer de inline SVG-code en plak hem in je HTML of een CSS-achtergrond.

Waar golven echt hun nut bewijzen

  • Sectieovergangen tussen een gekleurde hero en een witte body, zodat de blik doorloopt in plaats van op een harde lijn te stuiten.
  • Footers waar een gebogen bovenrand het donkere blok links verzacht.
  • Prijskaarten die een subtiel geverfde hoek willen zonder een volledige achtergrondafbeelding.
  • Hero-banners waar een golf aan de onderrand de lezer naar de inhoud leidt.

Anatomie van het pad

De generator bemonstert een sinuscurve tot één gevuld <path> binnen een 1440 x 320-viewBox:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" width="100%" height="320"><path d="M 0,160 L 24,180 L 48,199 ... L 1440,320 L 0,320 Z" fill="#6366F1"/></svg>

Het pad loopt in korte rechte segmenten over de breedte die de sinusgolf volgen, en sluit zich daarna tot de onderrand (of de bovenrand) om de effen vulling te vormen. Een hogere amplitude verbreedt de toppen en dalen; meer cycli persen er meer op de breedte.

Responsief maken

  • De SVG stelt al preserveAspectRatio="none" in, zodat de golf zich over elke breedte uitrekt.
  • Hij komt met width="100%"; regel de hoogte met CSS (height: auto of een vaste waarde) naar smaak.
  • Om golven te stapelen voor diepte, plaats je twee kopieën in je eigen CSS, positioneer je ze absoluut en geef je elk een andere kleur en dekking.

Toegankelijkheid

Golven zijn decoratief. Voeg aria-hidden="true" en role="img" toe zodat schermlezers het element overslaan, en houd alle betekenisvolle inhoud in echte, aangrenzende HTML-elementen.

Veelgestelde vragen

Plaats de SVG inline in je HTML wanneer je wilt dat de vulling reageert op CSS-variabelen (donkere modus, thema’s). Gebruik background-image wanneer de golf puur decoratief is en je wilt dat de browser hem apart cachet.

Ja. Het is een vectorieel <path> met preserveAspectRatio="none", dus hij schaalt naar elke breedte zonder gekarteld te worden, anders dan een rasterafbeelding die vervaagt bij vergroten.

Ja. Wikkel het pad in een SVG en animeer het d-attribuut of een transform: translateX() via CSS-keyframes. Houd de beweging subtiel; automatisch afspelende golfanimaties verouderen snel.

Meestal ruim onder 1 KB, want het is één pad met één vulkleur. Dat is een minieme fractie van elk PNG-equivalent.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

JavaScript-obfuscator

Obfusceer JavaScript met string-array-codering, hernoemen van variabelen, control-flow-flattening en injectie van dode code ter bescherming van de front-end.

Tool beschikbaar in andere talen