SVG-Wellen-Generator
Passe die Welle an, bis sie dir gefällt, erzeuge mit einem Tipp andere Variationen und kopiere das SVG. Es streckt sich auf die Breite des Bildschirms und bleibt leicht, ohne Bild.
So geht’sWellen, um Abschnitte zu trennen
Verfügbar auf: 
SVG-Wellen-Generator: wofür es gut ist
Passe Höhe, Zahl der Wellen, Variation und die Zahl der transparenten Schichten der Welle an, wähle Farbe und Stil (sanft, mit Spitzen oder in Stufen) und erzeuge mit einem Tipp Variationen. Die Option umkehren dreht die Welle nach oben.
Das SVG kommt mit einer viewBox von 1440 px Breite und preserveAspectRatio=none, um sich auf die Bildschirmbreite zu strecken. Lade die Datei herunter oder kopiere den Code.
So geht’s
- Passe Höhe, Wellen, Variation und Schichten an.
- Wähle Farbe und Stil und erzeuge andere Wellen, bis es dir gefällt.
- Lade das SVG herunter oder kopiere es und füge es zwischen den Abschnitten ein.
Wann nutzen
- Abschnitte von Landingpages trennen.
- Kopf- und Fußbereiche mit modernem Look.
- Hintergründe von Bannern und Kopfzeilen.
Häufige Fragen
Wie nutze ich die Welle auf der Website?
Füge das SVG zwischen zwei Abschnitten ein, direkt nach dem Ende des einen und vor dem anderen. Nutze die Farbe des unteren Abschnitts für die Welle und die des oberen für den Hintergrund, oder umgekehrt mit der Option umkehren.
Sieht die Welle am Handy gut aus?
Ja. Das SVG nutzt preserveAspectRatio=none und eine Breite von 100 %, streckt sich also auf die Bildschirmbreite und behält die Höhe, die du im CSS wählst.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.