animiertes SVG als Hintergrund

[Matthias Scharwies]

Servus!

Hallo Matthias,

Danke für Deine Antwort und den Tipp mit dem Gradienten! Das haben wir versucht, funktioniert aber nur eingeschränkt:

https://lmesg.de/schloss-hogwarts/svg_wasser.html

Erstens füllt das Bild leider nicht den ganzen Hintergrund aus. Woran könnte das liegen?

Das SVG hat eine Größe von 1000x1000. Wenn du die width- und height-Attribute weglassen würdest.

Zum zweiten ist der Verlauf noch nicht optimal, da es schon ca. in der Mitte anfängt. Optimalerweise wäre der Verlauf blau-weiß nur in einem Streifen in der Mitte, darunter alls blau und darüber alles weiß. Ich meine, dass so was möglich ist, wir haben es aber nicht hinbekommen.

Für einen harten Übergang benötigst du zwei Stops an der gleichen Stelle, die sich dann gleichzeitig verschieben.

Weitere Tipps?

Klingt kompliziert, benötigt auf jeden Fall javascript. Wenn möglich, hätten wir es gerne nur per CSS/SVG gemacht.

Irgendwie muss das Ende der Animation ja auch etwas mit dem Ende der Fragerunde zu tun haben, da benötigt man ja auch JS dafür.

Gruß Daniel

Herzliche Grüße

Matthias Scharwies