SVG-Wellen animieren: SMIL, CSS und JavaScript im Vergleich

Eine Welle, die sich bewegt, wirkt wie Wasser. Eine Welle, die steht, wirkt wie ein Dekor. Der Unterschied liegt in ein paar Zeilen, aber die Wahl der Technik entscheidet über Kompatibilität, Dateigröße und Leistung.

Weg 1: SMIL im SVG

Das animierte SVG aus dem Generator nutzt genau diesen Weg. Jede Schicht wird doppelt so breit gezeichnet und per animateTransform endlos verschoben. Weil die Welle periodisch ist, sieht man den Sprung am Ende nicht.

<g>
  <path d="…" fill="#2f4f7d"/>
  <animateTransform attributeName="transform" type="translate"
    values="0 0;-1440 0" dur="18s" repeatCount="indefinite"/>
</g>

Vorteile: läuft ohne JavaScript, funktioniert in img, object und als background-image, keine Abhängigkeit vom Seiten-CSS. Nachteile: Die Datei ist doppelt so groß wie das statische SVG, und in E-Mails wird nichts animiert.

Weg 2: CSS-Keyframes auf Inline-SVG

Wenn das SVG inline im HTML steht, kannst du die Schichten mit CSS bewegen. Das ist flexibler, weil sich Tempo und Richtung per Media Query oder Variable ändern lassen.

.welle g { animation: welle 18s linear infinite; }
.welle g:nth-child(2) { animation-duration: 13s; animation-direction: reverse; }
@keyframes welle { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .welle g { animation: none; } }

Die hintere Schicht sollte langsamer laufen als die vordere, das erzeugt Tiefe. Gegenläufige Richtungen wirken lebendiger als gleichläufige.

Weg 3: Pfad-Morphing per JavaScript

Die Vorschau im Generator berechnet jedes Frame neue Pfade, weil sie auf den Zeiger reagieren muss. Für eine Website ist das selten nötig, und es kostet: Bei fünf Schichten mit je 96 Stützpunkten sind das rund 500 Kurvenpunkte pro Frame. Auf einem Laptop unauffällig, auf einem älteren Telefon spürbar.

Wenn du es trotzdem brauchst, etwa für eine Reaktion auf Scrollen oder Zeiger, dann setze die Pfade direkt am DOM (setAttribute('d', …)) statt über ein Framework zu rendern, halte die Stützpunkte unter 100 und stoppe die Schleife, wenn der Tab im Hintergrund liegt (document.hidden).

Was Bewegung kostet

Technik	Datei	CPU	Kompatibilität
SMIL	doppelt	sehr gering	überall außer Mail
CSS-Keyframes	einfach	sehr gering	nur inline
JavaScript-Morphing	einfach	mittel bis hoch	nur inline, braucht Skript

Wann Bewegung schadet

Bewegung zieht den Blick. Im Hero ist das gewollt, neben einem Formular oder einer Preistabelle nicht. Eine Regel, die sich bewährt hat: eine bewegte Fläche pro Seite, und die stoppt bei prefers-reduced-motion. Wer das ignoriert, verliert Nutzer mit Bewegungsempfindlichkeit und bekommt in Lighthouse Abzüge für Energieverbrauch.