Animierte Hintergründe mit Canvas

Animierte Vektor-Hintergründe können Abwechslung in eine von Fullscreen-Fotos und -Videos geprägte Weblandschaft bringen. Schön wäre, wenn Ladezeiten sowie eine breite Unterstützung von Hard- und Software damit einhergehen. Eine Lösung lautet: Canvas. Das durch JavaScript gesteuerte HTML-Element wird von allen aktuellen Browsern unterstützt sowie auf mobilen Geräten performant wiedergegeben.


Die wahre Stärke liegt daran, dass die Leinwand (engl. canvas) nur durch Code befüllt wird – und sich damit als netter Nebeneffekt ganz neue Möglichkeiten auftun: Beispielsweise können durch rekursive Funktionen Fraktale oder andere wiederkehrende Elemente ohne großen Aufwand erzeugt werden. Wie das Ganze aussehen kann, habe ich hier in einer kleinen Demo aufbereitet:

Canvas Background by David Vielhuber

Canvas kann freilich auch Einsatz in Spielen, Werbung, Datenvisualisierung oder Kunst finden. In Zeiten von 4k und stufenlos skalierbaren Webseiten schlummert meiner Meinung nach viel Potential in dieser eher weniger bekannten Technik. In Kombination mit statischen SVG-Elementen bekommen vektorbasierte Grafiken nun auch im Web endlich die Bühne, die sie seit jeher verdienen.

Zurück