SVG Wave Generator

So wird der SVG-Wellengenerator verwendet

1. Wellenhöhe einstellen - steuert die vertikale Amplitude der Kurve in Pixeln der SVG-ViewBox.
2. Wellenanzahl wählen (Anzahl der Kämme über die Breite). Mehr Kämme erzeugen eine engere, höherfrequente Welle; weniger Kämme wirken als eine einzige breite Dünung.
3. Füllfarbe und Opazität wählen pro Ebene. Bis zu drei Ebenen lassen dich einen Parallax-ähnlichen Tiefeneffekt mit abnehmender Opazität auf den hinteren Ebenen aufbauen.
4. Umkehren umschalten, um den Pfad umzukehren, sodass die Kurve nach oben oder unten zeigt, was wichtig ist, wenn du die Welle als Trenner zwischen Abschnitten stapelst.
5. SVG-Markup kopieren für Inline-Verwendung, CSS-Hintergrund (data-URI-kodiert) für die Verwendung als Hintergrundbild kopieren, oder SVG herunterladen für ein Datei-Asset.

Wie der Pfad berechnet wird

Der Generator erstellt ein SVG-<path>-Element unter Verwendung des kubischen Bezier-Befehls C, wie in der SVG-2-Pfadspezifikation definiert. Für eine Welle mit N Kämmen über eine 1440-Einheiten-ViewBox legt der Pfad N+1 Ankerpunkte bei (0,amp), (1440/N, 0), (2*1440/N, amp) und so weiter, alternierend zwischen hohen und niedrigen y-Positionen. Zwischen jedem Paar von Ankern gibt das Tool ein kubisches Segment aus, dessen zwei Kontrollpunkte bei einem Drittel und zwei Dritteln des horizontalen Abstands liegen, mit y-Werten gleich dem Anker, den sie flankieren - das erzeugt das klassische sinusförmige "S" mit glatter Tangentenkontinuität (C1-Kontinuität in Kurvenmathematik-Begriffen). Nach dem letzten Anker schließt der Pfad nach unten zur unteren Ecke der ViewBox und zurück zum Ursprung, was ein gefülltes Wellenband statt eines Strichs erzeugt. Wenn du eine zweite oder dritte Ebene hinzufügst, ist jede dasselbe Pfad-Primitiv mit einem frisch zufälligen Phasenversatz auf den Anker-y-Werten, sodass die Kämme visuell nicht ausgerichtet sind, obwohl die Geometrie identisch ist.

Echte Anwendungen

• Marketing-Seiten-Abschnittstrenner, um den Übergang zwischen dem Hero und dem ersten Inhaltsblock zu mildern.
• Fußzeilen-Mastheads, bei denen eine Wellensilhouette gegen eine dunkle Farbe den unteren Teil der Seite verankert.
• Karten-Ober- oder Unterkanten für verspielte UI-Komponenten wie Preistabellen oder Team-Biografien.
• Hero-Hintergründe mit mehreren überlappenden Ebenen bei abnehmender Opazität, um Ozeantiefe zu imitieren.
• E-Mail-Templates, weil ein Inline-SVG eines der wenigen Grafik-Primitive ist, die konsistent über Gmail, Outlook und Apple Mail gerendert werden.

Häufige Fallstricke

Das häufigste Problem ist ein ViewBox-vs-CSS-Größen-Mismatch. Das SVG ist in einer 1440x150-ViewBox erstellt, aber wenn es über background-image gerendert wird, streckt der Browser es, was die Welle verzerrt, wenn das Container-Seitenverhältnis abweicht. background-size: 100% auto oder preserveAspectRatio="none" hinzufügen, um die Streckung zu steuern. Zweitens, Data-URI-URL-Kodierung: die Hintergrundausgabe prozent-kodiert # als %23, weil Browser sonst das Hash-Zeichen als Fragment parsen. Drittens, Barrierefreiheit: eine dekorative Welle sollte aria-hidden="true" und einen leeren <title> erhalten, damit Screenreader sie überspringen - das Tool gibt Markup ohne diese Attribute aus, also bei der Integration hinzufügen. Schließlich erzeugen sehr hohe Wellenanzahlen (>12) kombiniert mit kleinen Höhen kubische Segmente, die ihre Anker aufgrund von Gleitkomma-Rundung überschießen.

Warum SVG das richtige Format ist

SVG 1.1 (W3C-Empfehlung 2011, jetzt von SVG 2 aus 2018 abgelöst) definiert ein XML-basiertes Vektorgrafik-Format, dessen Pfade auflösungsunabhängig sind und dessen Dateigröße mit der Anzahl gezeichneter Befehle skaliert, nicht mit der Pixelanzahl. Ein Wellenteiler, beschrieben als ein <path d="...">, ist typischerweise 200-600 Bytes unkomprimiert, was ungefähr 30-mal kleiner ist als das entsprechende 1440x150 PNG-Export bei 1x und katastrophisch kleiner bei 2x oder 3x Retina. SVG rendert auch durch den GPU-Pfad als scharfe Kurven bei jeder Zoomstufe, sodass dieselbe Welle auf einem Telefon, einem 4K-Display und bei Druck-DPI scharf aussieht. Die Alternative wäre ein CSS-clip-path: polygon(), der auch skaliert, aber die Kurve als Polygon mit vielen Eckpunkten annähert; für Glätte braucht man 50-100 Eckpunkte, was eine größere Deklaration ergibt als den SVG-Pfad.

Vergleich mit anderen Wellen-Tools

Haikei und Shape Divider by ShapeDividerApp decken ähnliches Gelände mit mehr Formvarianten ab (Blob-Felder, Bauhaus-Ebenen, Gradientengitter). Haikeis Export-Ausgabe ist mit der dieses Tools vergleichbar. Figma-Plugins wie "Waves" generieren dasselbe Primitiv in der Design-Datei, zwingen aber dazu, SVG manuell zu exportieren. Wenn man nur eine einzige Welle braucht und sie auf einer Seite erscheinen soll, ist das Erstellen eines kubischen Bezier-Pfads von Hand in unter 60 Sekunden mit einer Zeile wie <path d="M0,75 C360,0 1080,150 1440,75 L1440,150 L0,150 Z"/> möglicherweise schneller als das Öffnen eines Tools, und ist das, was man tun sollte, wenn das Design bereits eng mit Tailwinds Arbitrary-Value-Klassen integriert ist. Generatoren wie diesen verwenden, wenn man mehr als eine Ebene braucht, mit Zufälligkeit experimentieren möchte oder direkt im Browser designt.