Kringel als animiertes .svg im Hintergrund der Zeile
Vorteile:
- wenig Geschwindigkeitsverlust (schlanker Code)
- kein z-index notwendig (Übersichtlicher im Pagebuilder)
- im Fall dass das css nicht geladen wird ist der Hintergrund einfach weiß
- Größe und Position können im css angepasst werden (Mobiloptimierung)
Nachteile:
- Farben und Animationen der Kringel müssen einzeln im Quellcode jedes .svg geändert werden.
Wenn wir mehrere Kringel in ein svg stecken, sind deren Positionen zueinander nur im svg zu ändern. Das ist auch gut für die Mobiloptimierung.
Viewbox und Position der Kringel müssen gut durchdacht sein.
Wir würden uns also verschiedene Kringel als svg speichern und diese dann den passenden Elementen hinzufügen. Da wir jedes svg wieder einzeln modifizieren, hochladen und einbinden müssen, sollten wir hier mit möglichst wenigen Korrekturen auskommen.