A Pen by Louis Hoebregts.

index.html

<canvas id="canvas"></canvas>

script.js

window.requestAnimFrame = (function(){
		  return  window.requestAnimationFrame 	||
		    window.webkitRequestAnimationFrame 		||
		    window.mozRequestAnimationFrame    		||
		    function( callback ){
		    window.setTimeout(callback, 1000 / 60);
		  };
		})();

		var canvas    = document.getElementById('canvas'),
		    ctx       = canvas.getContext('2d'),
		    ww        = window.innerWidth,
		    wh        = window.innerHeight,
		    j         = 0;

		initCanvas();

		function draw() {
		  setTimeout(function() {
		  	requestAnimationFrame(draw);

		  	var cos = Math.round(Math.abs(Math.cos(j/200)*255)*100)/100;
		  	ctx.strokeStyle = "rgba("+cos+","+cos+","+cos+",.1)";
		  	ctx.save();
    		for(var i2=0;i2<3;i2++){
    			ctx.translate( ww/2,wh/2 );
    			ctx.rotate(Math.cos(Math.PI*j/400));
    			ctx.translate( -ww/2,-wh/2 );
			    for(var i=1;i<5;i++){
			    	ctx.beginPath();
					ctx.moveTo(ww*.25, i*wh/5);
					ctx.lineTo(ww*.75, i*wh/5);
					ctx.stroke();
					ctx.closePath();
			    }
			}
		    ctx.restore();

		    j++;
		  }, 42);
		};
		draw();

		window.addEventListener('resize', initCanvas);
		function initCanvas(){
			ww	= window.innerWidth;
			wh	= window.innerHeight;
			canvas.width  = ww;
			canvas.height  = wh;
			ctx.strokeStyle="rgba(255,255,255,.1)";
			ctx.beginPath();
        ctx.arc(ww/2, wh/2, wh*.48, 0, Math.PI*2, false);
        ctx.fill();
        ctx.clip();
		}

Spinning-stars.markdown

Spinning stars

Try to resize your window for more fun !

A Pen by Louis Hoebregts on CodePen.

License.

style.css

html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}