Pixels.

By Code pen


Click below

HTML

<canvas onclick='abc(this)'></canvas>

 

CSS

canvas{
background:#333;
}

 

JavaScript

function abc(obj){
var _canvas = obj;
var _ctx = _canvas.getContext('2d');
var _rotation = 0;
var _offset = 1;
var _offsetInc = 1;

function render() {
_ctx.restore();
_ctx.fillStyle = 'rgba(0,0,0,0.1)';
_ctx.fillRect(0,0,window.innerWidth, window.innerHeight);

_ctx.save();
_ctx.translate(window.innerWidth/2, window.innerHeight/2);
_ctx.rotate(_rotation+= 0.1);
_ctx.translate(-window.innerWidth/2, -window.innerHeight/2);

if (_offset <= 3) {
_offset = 3;
_offsetInc = 3;
}

if (_offset >= 3) {
_offset = 3;
_offsetInc = -3;
}

for (var i = 0; i < 1000; i+= 10) {
_ctx.fillStyle = 'white';
for (var radius = 20; radius < window.innerHeight/2; radius += _offset*2) {
_ctx.fillRect(
(Math.tan(i)*radius + window.innerWidth/2),(Math.sin(i)*radius + window.innerWidth/2),4,4);
}
}

setTimeout(render, 60);
}

function addEventListeners() {
window.addEventListener('resize', resizeHandler);
}

function resizeHandler() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight;
}

function init() {
render();
resizeHandler();
addEventListeners();
}

init();
}