SVG-Wellen-Hintergrund-Generator
Wellen-SVGs, die Abschnitte weich verbinden, nach Farbe, Höhe und Wölbung erstellen und kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Ein Tool, mit dem du wellenförmige SVGs, die Website-Abschnitte weich miteinander verbinden, allein über Farbe, Höhe, Wölbung und Wellenanzahl im Handumdrehen erstellst. Dank preserveAspectRatio passt sich die Welle der Bildschirmbreite an und lässt sich so direkt als Abschnittstrenner auf responsiven Landingpages einsetzen.
Anleitung
- Forme mit den Reglern für Höhe, Wölbung (Amplitude) und Wellenanzahl die gewünschte Kurve.
- Wähle Farbe und Transparenz und drehe die Richtung bei Bedarf über „vertikal spiegeln" um.
- Prüfe die Vorschau und klicke auf die Schaltfläche „SVG kopieren".
- Füge den SVG-Code oberhalb oder unterhalb eines Abschnitts als Trenner ein.
FAQ
- Werden die Eingaben an einen Server gesendet?
- Nein. Das Anpassen von Farben und Werten sowie die Erzeugung des SVG-Codes geschehen ausschließlich im Browser; keinerlei Daten werden an einen Server gesendet oder gespeichert.
- Passt sich die erstellte Welle der Bildschirmgröße an?
- Ja. Das erzeugte SVG enthält width=100% und preserveAspectRatio=none, sodass es sich horizontal an die Breite des Elternelements anpasst. Die Höhe bleibt beim eingestellten Wert.
- Kann ich die Farbe als Farbverlauf füllen?
- Derzeit gibt es nur einfarbige Füllung. Für einen Farbverlauf definierst du im kopierten SVG statt des fill-Attributs einen linearGradient in <defs> und setzt das fill des path auf dessen id.