Animated backgrounds with canvas

animated vector backgrounds can bring variety to a web landscape dominated by full-screen photos and videos. it would be nice if loading times as well as broad hardware and software support went hand in hand with this. one solution is called canvas. the JavaScript-controlled HTML element is supported by all current browsers and can be displayed with high performance on mobile devices.


The real strength lies in the fact that the canvas is only filled by code - which opens up completely new possibilities as a nice side effect: For example, fractals or other recurring elements can be created with little effort using recursive functions. I have prepared a little demo here how the whole thing can look:

Canvas Background by David Vielhuber

Canvas can of course also be used in games, advertising, data visualization or art. In times of 4k and continuously scalable websites, in my opinion there is a lot of potential in this less well-known technology. In combination with static SVG elements, vector-based graphics are finally getting the stage on the web that they have always deserved.

Back