Golf-SVG-generator
Pas de grootte, vorm en kleur van golven aan om scheidingen of achtergronden voor webpagina's te maken. Kopieer of sla de SVG of CSS-achtergrond op, of sla een PNG-afbeelding op.
Wat je kunt doen
Vorm en kleuren aanpassen
Pas de golfhoogte, het aantal, de positie en de vulrichting aan en maak de golf in één of twee kleuren.
Het resultaat ophalen in een formaat dat bij je behoeften past
Kopieer en sla SVG-code of een CSS-achtergrond op, of sla de afbeelding op als PNG.
Gebruiksaanwijzing
Een beginvorm kiezen
Pas de waarden rechtstreeks aan of kies een vergelijkbare vorm via ‘Een sjabloon kiezen’.
Afmetingen en kleuren aanpassen
Geef breedte, hoogte, amplitude en het aantal golven op. Pas de startpositie en middenhoogte aan in de geavanceerde instellingen.
De SVG genereren en controleren
Controleer de gegenereerde golfvorm en transparante gebieden. Genereer opnieuw nadat je instellingen hebt gewijzigd.
Het gewenste formaat ophalen
Kies SVG of een CSS-achtergrond om te kopiëren of op te slaan, of sla de PNG op.
Handig voor
Paginasecties scheiden
golfvormige scheidingen tussen inhoudssecties of boven een voettekst maakt.
De kleuren van je site laten overeenkomen
een effen kleur of gradiënt gebruikt om een achtergrondbestand te maken dat past bij het kleurenschema van de pagina.
Golfvormen en opslagformaten
Amplitude en aantal golven
Amplitude is de mate van verticale variatie; het aantal golven is het aantal cycli over de volledige breedte. Deze functie is niet bedoeld om audiogolfvormen weer te geven.
Golfpositie en afgeknipte gebieden
Wijzig de startpositie met de fase en de verticale positie met de middenhoogte. Delen buiten de afbeelding worden afgeknipt.
Kiezen tussen SVG en PNG
SVG geeft de vorm weer als vectoren. PNG slaat een afbeelding op met de opgegeven pixelafmetingen en behoudt transparante gebieden.
Een CSS-achtergrond plaatsen
CSS specificeert een achtergrondafbeelding. Stel de breedte en hoogte in van het element waarin je deze gebruikt, zodat er ruimte is om de achtergrond weer te geven.
Veelgestelde vragen
Kan ik de golfvorm en kleuren aanpassen?
Je kunt waarden en kleuren opgeven. Selecteer ‘Twee kleuren gebruiken’ om de tweede kleur en de gradiënthoek in te stellen.
Wat gebeurt er met de huidige instellingen als ik een sjabloon selecteer?
De instellingen van het sjabloon vervangen de huidige instellingen, waaronder breedte, hoogte en kleuren. Pas na de selectie zo nodig waarden aan.
Verandert het voorbeeld als ik de instellingen wijzig?
Selecteer na wijzigingen ‘SVG genereren’ om het resultaat te bekijken. Het eerder gegenereerde resultaat kan daarna niet meer worden weergegeven of opgeslagen.
Is de SVG een exacte sinusgolf?
De golf wordt benaderd met een vloeiende kubische curve. Dit is geen golfvorm voor wiskundige metingen of audioanalyse.
Bestandsverwerking
- Invoer
- Maak de golf op basis van numerieke golfinstellingen en kleuren. Je hoeft geen afbeelding te selecteren.
- Uitvoer
- wave.svg, wave.css en wave.png. SVG en CSS kunnen ook worden gekopieerd.