🌊 Ein Toolkit,
jede Designaufgabe

SVG-Wellen-Generator

Erstellen Sie sanfte SVG-Wellen-Trenner für Ihre Website – Amplitude, Wellenlänge und Ebenen einstellen, SVG kopieren.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🌊 SVG-Wellen-Generator

SVG-Wellen-Generator Anleitung

Wellen-Trenner sind SVG-Formen, die Seitenabschnitte sanft voneinander trennen — das Markenzeichen moderner Hero-Sektionen, Footer und App-Landingpages. SVG hält sie in jeder Bildschirmgröße gestochen scharf.

Amplitude, Wellenlänge und Ebenen einstellen, Füllfarbe wählen, SVG kopieren. Inline ins HTML einbetten oder als .svg-Datei speichern und wie ein Bild nutzen.

Pro Tips

Frequently Asked Questions

Q: Wie bette ich die Welle in meine Seite ein?
Wie bette ich die Welle in meine Seite ein? Kopieren Sie das SVG und fügen Sie es inline ins HTML ein, oder speichern Sie den Code als .svg-Datei und referenzieren Sie ihn mit einem <img>-Tag.
Q: Kann ich die Wellenrichtung umkehren?
Kann ich die Wellenrichtung umkehren? Ja — fügen Sie transform="scaleY(-1)" zum SVG hinzu oder vertauschen Sie Start und Ende des Pfads, damit die Welle andersherum schwingt.
Q: Warum SVG statt PNG?
Warum SVG statt PNG? SVG bleibt in jeder Auflösung scharf, wiegt nur wenige hundert Bytes und lässt sich per CSS umfärben und animieren.
Q: Wie mache ich die Welle volle Breite?
Wie mache ich die Welle volle Breite? Das SVG nutzt preserveAspectRatio="none" und width:100%, streckt sich also ohne Verzerrung auf jede Containerbreite.
Q: Kann ich die Welle animieren?
Kann ich die Welle animieren? Ja — legen Sie das SVG in einen Container mit overflow:hidden und animieren Sie seine Position mit CSS-Keyframes für einen rollenden Welleneffekt.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.