<canvas id="app"></canvas>
#app {
			position: absolute;
			top: 0; left: 0; right: 0; }
var canvas  = document.getElementById("app"),
		ctx		= canvas.getContext("2d"),
		options = {
			opacity: 0.05,
			count: 10,							// Количество отрисованных элементов за один раз
			fps: 60,							// скорость рендера
			color: "hsl(hue, 100%, 50%)",		// цвет куба
			hue: 0,								// тон цвета
			divisionSpeed: 100					// делитель скорости, чем больше тем медленей скорость смены цвета
		};

	canvas.width  = window.innerWidth % 10 ? ( Math.floor( window.innerWidth / 10 ) * 10 ) : window.innerWidth;
	canvas.height = window.innerHeight % 10 ? ( Math.floor( window.innerHeight / 10 ) * 10 ) : window.innerHeight;

	var width     = canvas.width,
		height 	  = canvas.height;

	function Init(){
			window.requestAnimationFrame(Init);  

		Step();									// Отрисовка куба
	}
	function Step() {
		
		for(var i = 0; i < options.count; i++){
			if(options.hue == 360) options.hue = 0;								// значение тона в цикле от 0 до 360
			else options.hue = options.hue + ( 1 / options.divisionSpeed );	

			var fillColor = options.color.replace("hue", options.hue);			// вырезаем шаблон из цвета куба с помощью поиска подстроки и её замены

			ctx.fillStyle = fillColor;								// заливаем будущий куб
			ctx.fillRect( Math.random() * width, Math.random() * height, 10, 10 );		// Отрисовываем куб в рандомном месте на канвасе с рандомным размером
		}

		ctx.fillStyle = "rgba(255,255,255,"+ options.opacity +")";
		ctx.fillRect(0, 0, width, height);	
	}


	Init();

	window.addEventListener("resize", function(){
		canvas.width  = window.innerWidth % 10 ? ( Math.floor( window.innerWidth / 10 ) * 10 ) : window.innerWidth;
		canvas.height = window.innerHeight % 10 ? ( Math.floor( window.innerHeight / 10 ) * 10 ) : window.innerHeight;

		width     = canvas.width,
		height 	  = canvas.height;
	});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.