SVG-Wellen-Generator
Erzeugen Sie eine fließende SVG-Wellenkurve, um zwei Seitenabschnitte weicher zu trennen als mit einer einfachen geraden Linie. Amplitude, Frequenz und Farbe sind vollständig einstellbar.
So funktioniert es
Die Welle wird aus aufeinanderfolgenden kubischen Bézier-Kurven aufgebaut, wobei jede „Wölbung“ zwischen der Oberseite und der Unterseite einer Grundlinie wechselt, für einen fließenden Verlauf ohne Ecken. Die Anzahl der Wölbungen (Frequenz) und ihre Höhe (Amplitude) lassen sich unabhängig voneinander einstellen, ebenso die Füllfarbe.
Wie verwende ich diese Welle als Trenner zwischen zwei Abschnitten?
Kopieren Sie den SVG-Code und positionieren Sie ihn absolut am unteren Rand (oder am oberen Rand, mit der Option „Umdrehen“) eines farbigen Abschnitts, mit einer Breite von 100%: Die Welle überdeckt dann den Übergang zwischen diesem und dem nächsten Abschnitt, dessen Hintergrundfarbe der SVG-Füllfarbe entsprechen muss, damit der Übergang nahtlos wirkt.
Muss die festgelegte Breite genau der Breite meiner Seite entsprechen?
Nein: Dank des Attributs preserveAspectRatio="none" und einer prozentualen Breite in CSS wird das SVG gedehnt, um die gesamte verfügbare Containerbreite einzunehmen, auch wenn seine ursprüngliche Breite nicht genau der Ihrer Seite entspricht.
100% lokale Erzeugung: Die Kurve wird vollständig in Ihrem Browser berechnet, ohne dass Daten an einen Server gesendet werden.