animiertes SVG als Hintergrund

[grmblfx]

Wahnsin, ich bin echt platt! Ganze 6 Zeilen CSS, ohne jegliche Grafik! Vielen Dank, (fast) genau was wir gesucht haben!

Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe: Warum ist background-size 200vh, nicht 100? Und warum dann to { background-position-y: 50%; }? Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie? Wenn ich das Beispiel in meine Seite kopiere, wird nicht der ganze Viewport bis nach oben ausgefüllt, sondern die Animation endet bei ca. 70% der Höhe. Wie bekomme ich es bis ganz nach oben? Ich habe verschiedene Zahlen ausprobiert, aber irgendwie habe ich das Prinzip dahinter noch nicht verstanden.

Gruß Daniel