SVG Wave Generator
Geschichtete Wellen als SVG, CSS und Animation. Zeiger übers Meer bewegen.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none">
<path d="M0.0,107.0C11.3,107.0 11.3,106.0 22.5,106.0C33.8,106.0 33.8,104.8 45.0,104.8C56.3,104.8 56.3,103.6 67.5,103.6C78.8,103.6 78.8,102.4 90.0,102.4C101.3,102.4 101.3,101.1 112.5,101.1C123.8,101.1 123.8,99.7 135.0,99.7C146.3,99.7 146.3,98.4 157.5,98.4C168.8,98.4 168.8,97.0 180.0,97.0C191.3,97.0 191.3,95.7 202.5,95.7C213.8,95.7 213.8,94.4 225.0,94.4C236.3,94.4 236.3,93.1 247.5,93.1C258.8,93.1 258.8,91.8 270.0,91.8C281.3,91.8 281.3,90.5 292.5,90.5C303.8,90.5 303.8,89.3 315.0,89.3C326.3,89.3 326.3,88.2 337.5,88.2C348.8,88.2 348.8,87.1 360.0,87.1C371.3,87.1 371.3,86.0 382.5,86.0C393.8,86.0 393.8,85.1 405.0,85.1C416.3,85.1 416.3,84.2 427.5,84.2C438.8,84.2 438.8,83.4 450.0,83.4C461.3,83.4 461.3,82.7 472.5,82.7C483.8,82.7 483.8,82.1 495.0,82.1C506.3,82.1 506.3,81.6 517.5,81.6C528.8,81.6 528.8,81.2 540.0,81.2C551.3,81.2 551.3,81.0 562.5,81.0C573.8,81.0 573.8,80.8 585.0,80.8C596.3,80.8 596.3,80.8 607.5,80.8C618.8,80.8 618.8,81.0 630.0,81.0C641.3,81.0 641.3,81.2 652.5,81.2C663.8,81.2 663.8,81.7 675.0,81.7C686.3,81.7 686.3,82.2 697.5,82.2C708.8,82.2 708.8,83.0 720.0,83.0C731.3,83.0 731.3,83.9 742.5,83.9C753.8,83.9 753.8,84.9 765.0,84.9C776.3,84.9 776.3,86.1 787.5,86.1C798.8,86.1 798.8,87.4 810.0,87.4C821.3,87.4 821.3,88.9 832.5,88.9C843.8,88.9 843.8,90.5 855.0,90.5C866.3,90.5 866.3,92.2 877.5,92.2C888.8,92.2 888.8,94.0 900.0,94.0C911.3,94.0 911.3,95.9 922.5,95.9C933.8,95.9 933.8,97.9 945.0,97.9C956.3,97.9 956.3,99.9 967.5,99.9C978.8,99.9 978.8,101.9 990.0,101.9C1001.3,101.9 1001.3,104.0 1012.5,104.0C1023.8,104.0 1023.8,106.0 1035.0,106.0C1046.3,106.0 1046.3,107.9 1057.5,107.9C1068.8,107.9 1068.8,109.8 1080.0,109.8C1091.3,109.8 1091.3,111.5 1102.5,111.5C1113.8,111.5 1113.8,113.2 1125.0,113.2C1136.3,113.2 1136.3,114.6 1147.5,114.6C1158.8,114.6 1158.8,115.9 1170.0,115.9C1181.3,115.9 1181.3,117.0 1192.5,117.0C1203.8,117.0 1203.8,117.8 1215.0,117.8C1226.3,117.8 1226.3,118.4 1237.5,118.4C1248.8,118.4 1248.8,118.7 1260.0,118.7C1271.3,118.7 1271.3,118.7 1282.5,118.7C1293.8,118.7 1293.8,118.5 1305.0,118.5C1316.3,118.5 1316.3,117.9 1327.5,117.9C1338.8,117.9 1338.8,117.0 1350.0,117.0C1361.3,117.0 1361.3,115.8 1372.5,115.8C1383.8,115.8 1383.8,114.4 1395.0,114.4C1406.3,114.4 1406.3,112.6 1417.5,112.6C1428.8,112.6 1428.8,110.6 1440.0,110.6L1440,320L0,320Z" fill="#7aa0c4"/>
<path d="M0.0,140.3C11.3,140.3 11.3,143.8 22.5,143.8C33.8,143.8 33.8,147.1 45.0,147.1C56.3,147.1 56.3,150.2 67.5,150.2C78.8,150.2 78.8,153.0 90.0,153.0C101.3,153.0 101.3,155.3 112.5,155.3C123.8,155.3 123.8,157.1 135.0,157.1C146.3,157.1 146.3,158.4 157.5,158.4C168.8,158.4 168.8,159.0 180.0,159.0C191.3,159.0 191.3,159.0 202.5,159.0C213.8,159.0 213.8,158.2 225.0,158.2C236.3,158.2 236.3,156.7 247.5,156.7C258.8,156.7 258.8,154.6 270.0,154.6C281.3,154.6 281.3,151.9 292.5,151.9C303.8,151.9 303.8,148.6 315.0,148.6C326.3,148.6 326.3,144.8 337.5,144.8C348.8,144.8 348.8,140.6 360.0,140.6C371.3,140.6 371.3,136.2 382.5,136.2C393.8,136.2 393.8,131.6 405.0,131.6C416.3,131.6 416.3,127.0 427.5,127.0C438.8,127.0 438.8,122.5 450.0,122.5C461.3,122.5 461.3,118.3 472.5,118.3C483.8,118.3 483.8,114.4 495.0,114.4C506.3,114.4 506.3,111.0 517.5,111.0C528.8,111.0 528.8,108.1 540.0,108.1C551.3,108.1 551.3,105.9 562.5,105.9C573.8,105.9 573.8,104.4 585.0,104.4C596.3,104.4 596.3,103.7 607.5,103.7C618.8,103.7 618.8,103.7 630.0,103.7C641.3,103.7 641.3,104.4 652.5,104.4C663.8,104.4 663.8,105.9 675.0,105.9C686.3,105.9 686.3,108.1 697.5,108.1C708.8,108.1 708.8,110.9 720.0,110.9C731.3,110.9 731.3,114.2 742.5,114.2C753.8,114.2 753.8,118.0 765.0,118.0C776.3,118.0 776.3,122.0 787.5,122.0C798.8,122.0 798.8,126.3 810.0,126.3C821.3,126.3 821.3,130.6 832.5,130.6C843.8,130.6 843.8,134.8 855.0,134.8C866.3,134.8 866.3,138.9 877.5,138.9C888.8,138.9 888.8,142.7 900.0,142.7C911.3,142.7 911.3,146.2 922.5,146.2C933.8,146.2 933.8,149.1 945.0,149.1C956.3,149.1 956.3,151.5 967.5,151.5C978.8,151.5 978.8,153.3 990.0,153.3C1001.3,153.3 1001.3,154.5 1012.5,154.5C1023.8,154.5 1023.8,155.1 1035.0,155.1C1046.3,155.1 1046.3,155.0 1057.5,155.0C1068.8,155.0 1068.8,154.4 1080.0,154.4C1091.3,154.4 1091.3,153.2 1102.5,153.2C1113.8,153.2 1113.8,151.6 1125.0,151.6C1136.3,151.6 1136.3,149.5 1147.5,149.5C1158.8,149.5 1158.8,147.1 1170.0,147.1C1181.3,147.1 1181.3,144.5 1192.5,144.5C1203.8,144.5 1203.8,141.7 1215.0,141.7C1226.3,141.7 1226.3,139.0 1237.5,139.0C1248.8,139.0 1248.8,136.3 1260.0,136.3C1271.3,136.3 1271.3,133.7 1282.5,133.7C1293.8,133.7 1293.8,131.4 1305.0,131.4C1316.3,131.4 1316.3,129.3 1327.5,129.3C1338.8,129.3 1338.8,127.6 1350.0,127.6C1361.3,127.6 1361.3,126.2 1372.5,126.2C1383.8,126.2 1383.8,125.3 1395.0,125.3C1406.3,125.3 1406.3,124.7 1417.5,124.7C1428.8,124.7 1428.8,124.5 1440.0,124.5L1440,320L0,320Z" fill="#4a6f9e"/>
<path d="M0.0,177.4C11.3,177.4 11.3,174.5 22.5,174.5C33.8,174.5 33.8,171.4 45.0,171.4C56.3,171.4 56.3,168.3 67.5,168.3C78.8,168.3 78.8,165.2 90.0,165.2C101.3,165.2 101.3,162.1 112.5,162.1C123.8,162.1 123.8,159.2 135.0,159.2C146.3,159.2 146.3,156.5 157.5,156.5C168.8,156.5 168.8,154.0 180.0,154.0C191.3,154.0 191.3,151.8 202.5,151.8C213.8,151.8 213.8,149.9 225.0,149.9C236.3,149.9 236.3,148.4 247.5,148.4C258.8,148.4 258.8,147.2 270.0,147.2C281.3,147.2 281.3,146.4 292.5,146.4C303.8,146.4 303.8,145.9 315.0,145.9C326.3,145.9 326.3,145.9 337.5,145.9C348.8,145.9 348.8,146.3 360.0,146.3C371.3,146.3 371.3,147.0 382.5,147.0C393.8,147.0 393.8,148.1 405.0,148.1C416.3,148.1 416.3,149.5 427.5,149.5C438.8,149.5 438.8,151.2 450.0,151.2C461.3,151.2 461.3,153.2 472.5,153.2C483.8,153.2 483.8,155.3 495.0,155.3C506.3,155.3 506.3,157.7 517.5,157.7C528.8,157.7 528.8,160.1 540.0,160.1C551.3,160.1 551.3,162.6 562.5,162.6C573.8,162.6 573.8,165.2 585.0,165.2C596.3,165.2 596.3,167.7 607.5,167.7C618.8,167.7 618.8,170.2 630.0,170.2C641.3,170.2 641.3,172.6 652.5,172.6C663.8,172.6 663.8,174.9 675.0,174.9C686.3,174.9 686.3,176.9 697.5,176.9C708.8,176.9 708.8,178.9 720.0,178.9C731.3,178.9 731.3,1
…16.6 KB · Link zu dieser Welle steht in der Adresszeile
Drei Wege,
eine Welle
einzubauen.
Als Trenner
Inline-SVG zwischen zwei Sektionen. Die unterste Schicht bekommt die Farbe der nächsten Sektion, dann sitzt der Übergang nahtlos.
<section class="hero">…</section>
<svg viewBox="0 0 1440 320"
preserveAspectRatio="none"
style="display:block;width:100%;height:12vw">
<!-- Pfade aus dem Export -->
</svg>
<section class="inhalt">…</section>Als Hintergrund
Der CSS-Export legt das SVG als Data-URI in ein background-image. Kein zusätzlicher Request, skaliert mit cover.
.wellen {
background-image: url("data:image/svg+xml,…");
background-size: cover;
background-position: center;
min-height: 320px;
}Animiert
Das animierte SVG läuft ohne JavaScript, auch als img-Tag. Jede Schicht in eigenem Tempo, hintere langsamer als vordere.
<img src="wellen-1831-animiert.svg"
alt=""
style="display:block;width:100%">Aufbau einer Welle
6 Schichten
maximal, hinten hell und langsam, vorne dunkel und schnell. So entsteht Tiefe ohne Schatten.
4 Teilwellen
je Schicht, als Summe von Sinuswellen mit eigener Phase. Komplexität 1 ist eine reine Sinuswelle.
0 Byte
verlassen deinen Rechner. Erzeugung, Export und Download laufen im Browser.
Häufig gestellte Fragen
Was macht der SVG Wave Generator?
Er erzeugt geschichtete Wellen als Vektorgrafik. Du stellst Schichten, Amplitude, Wellenlänge, Komplexität, Tempo, Höhe, Richtung und Farbpalette ein, der Seed macht das Ergebnis reproduzierbar. Heraus kommt SVG-Code, ein animiertes SVG, ein CSS-Hintergrund oder eine PNG-Datei. Alles läuft in deinem Browser.
Wie baue ich die Welle als Trenner zwischen zwei Sektionen ein?
Am einfachsten als Inline-SVG direkt vor der nächsten Sektion, mit width 100 Prozent und der Hintergrundfarbe der folgenden Sektion als Füllung der untersten Schicht. Für Hintergründe nimmst du den CSS-Export mit background-image. Der Artikel „Wellen als Section-Divider" zeigt beide Wege mit Code.
Was ist der Unterschied zwischen SVG und animiertem SVG?
Das statische SVG ist ein Standbild der Welle. Das animierte SVG enthält jede Schicht doppelt so breit und ein animateTransform-Element, das sie endlos verschiebt, jede Schicht in eigenem Tempo und eigener Richtung. Es läuft ohne JavaScript in jedem Browser und als img-Tag, in Mails allerdings nicht.
Warum sind die Wellen mit Seed reproduzierbar?
Die Teilwellen jeder Schicht werden aus einem deterministischen Zufallsgenerator abgeleitet, der mit dem Seed startet. Gleicher Seed und gleiche Regler ergeben immer dieselbe Welle. Die Adresszeile trägt alle Werte, du kannst den Link also speichern oder weitergeben.
Wie groß wird die Datei?
Ein statisches SVG mit vier Schichten liegt bei etwa 4 bis 6 KB, animiert bei 8 bis 12 KB, weil jede Schicht doppelt so breit gezeichnet wird. Für Hintergründe reicht meist die Hälfte der Komplexität. Der PNG-Export ist 1440 Pixel breit und deutlich größer, nimm ihn nur, wenn SVG nicht geht.
Kann ich eigene Farben verwenden?
Im exportierten SVG steht jede Farbe als fill-Attribut, du kannst sie in jedem Editor ersetzen. Die fünf Paletten des Generators sind auf Kontrast und Tiefenwirkung abgestimmt: die hinterste Schicht ist immer die hellste, die vorderste die dunkelste.
Werden Daten übertragen?
Nein. Die Wellen entstehen in deinem Browser, Export und Download passieren lokal. Der Link in der Adresszeile enthält nur die Reglerwerte.