magadanskiuchen/func.js

## func.js
Array.prototype.shuffle = function () {
	for (var i = this.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		var tmp = this[i];
		this[i] = this[j];
		this[j] = tmp;
	}

	return this;
}

jQuery(function ($) {
	// number of items config
	var minItems = 200;
	var maxItems = 300;

	// dimentions config
	var minDimensions = 10;
	var maxDimensions = 120;

	// color channels array
	var cc = [];

	for (var i = 0; i < 3; ++i) {
		cc.push(parseInt(Math.random() * 255));
	}

	function getColor() {
		return cc.shuffle().join(', ');
	}

	$(document.body).css({ background: 'linear-gradient(to right, rgb(' + getColor() + ') 0%, rgb(' + getColor() + ') 100%)' });

	var itemsNum = parseInt(minItems + Math.random() * (maxItems - minItems));
	var items = $(null);

	for (var i = 0; i < itemsNum; ++i) {
		var div = $('<div />');
		var dimensions = parseInt(minDimensions + Math.random() * (maxDimensions - minDimensions));
		var left = (Math.random() * ($(document).width() + dimensions)) - dimensions;
		var top = (Math.random() * ($(document).height() + dimensions)) - dimensions;
		var circleColor = getColor();
		var borderOpacity = Math.random();
		var blur = Math.random() * (dimensions/10);
		var zIndex = parseInt((dimensions/10) - blur);

		div.css({
			width: dimensions,
			height: dimensions,
			backgroundColor: 'rgba(' + circleColor + ', ' + Math.random() + ')',
			opacity: Math.random(),
			zIndex: zIndex,
			boxShadow: '0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + '), 0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + ') inset',
			transform: 'translate(' + left + 'px, ' + top + 'px)',
			'-webkit-filter': 'blur(' + blur + 'px)'
		});

		items = items.add(div);
	}

	$(document.body).append(items);
});

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Partition</title>
	<link rel="stylesheet" type="text/css" href="style.css" />

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="func.js"></script>
</head>
<body>

</body>
</html>

## style.css
@charset "utf-8";

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { overflow: hidden; background: #000; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }

div { position: absolute; border-radius: 50%; }
	Array.prototype.shuffle = function () {
	for (var i = this.length - 1; i > 0; i--) {
	var j = Math.floor(Math.random() * (i + 1));
	var tmp = this[i];
	this[i] = this[j];
	this[j] = tmp;
	}

	return this;
	}

	jQuery(function ($) {
	// number of items config
	var minItems = 200;
	var maxItems = 300;

	// dimentions config
	var minDimensions = 10;
	var maxDimensions = 120;

	// color channels array
	var cc = [];

	for (var i = 0; i < 3; ++i) {
	cc.push(parseInt(Math.random() * 255));
	}

	function getColor() {
	return cc.shuffle().join(', ');
	}

	$(document.body).css({ background: 'linear-gradient(to right, rgb(' + getColor() + ') 0%, rgb(' + getColor() + ') 100%)' });

	var itemsNum = parseInt(minItems + Math.random() * (maxItems - minItems));
	var items = $(null);

	for (var i = 0; i < itemsNum; ++i) {
	var div = $('<div />');
	var dimensions = parseInt(minDimensions + Math.random() * (maxDimensions - minDimensions));
	var left = (Math.random() * ($(document).width() + dimensions)) - dimensions;
	var top = (Math.random() * ($(document).height() + dimensions)) - dimensions;
	var circleColor = getColor();
	var borderOpacity = Math.random();
	var blur = Math.random() * (dimensions/10);
	var zIndex = parseInt((dimensions/10) - blur);

	div.css({
	width: dimensions,
	height: dimensions,
	backgroundColor: 'rgba(' + circleColor + ', ' + Math.random() + ')',
	opacity: Math.random(),
	zIndex: zIndex,
	boxShadow: '0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + '), 0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + ') inset',
	transform: 'translate(' + left + 'px, ' + top + 'px)',
	'-webkit-filter': 'blur(' + blur + 'px)'
	});

	items = items.add(div);
	}

	$(document.body).append(items);
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Partition</title>
	<link rel="stylesheet" type="text/css" href="style.css" />

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="func.js"></script>
	</head>
	<body>

	</body>
	</html>
	@charset "utf-8";

	* { margin: 0; padding: 0; }
	html, body { width: 100%; height: 100%; }
	body { overflow: hidden; background: #000; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }

	div { position: absolute; border-radius: 50%; }