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 filled solely with code – and this opens up entirely new possibilities as a nice side effect: For example, fractals or other recurring elements can be generated effortlessly using recursive functions. I've put together a small demo here to show what this can look like.:

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