Klowner/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */
body {
background: #f06;
background: linear-gradient(45deg, #f0f, #f02);
min-height: 100%;
overflow: hidden;
height: 100%;
}
h1 {
	font-family: sans-serif;
	color: #fff;
}
.dynamic {
	position: absolute;
	display: block;
}
.main {
	text-align:center;
	text-shadow: 0px 0px 200px #fff;

}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main">
	<i class="fa fa-magic" style="font-size:20em"></i>
	<h1>sumisusan.com</h1>
	</div>

## dabblet.js
// alert('Hello world!');

var count = 20;
var sprites = [];


var Sprite = function (x,y, elem) {
	this.x = x;
	this.y = y;
	this.xv = Math.random();
	this.yv = Math.random();
	this.sv = Math.random();
	this.s = 0;
	this.elem = elem;
	};

var r = document.body.getClientRects()[0];

Sprite.prototype = {
 update: function (t) {
   this.x = this.x + this.xv * t;
   this.y = this.y + this.yv * t;
   this.s = this.s + this.sv * t * 0.1;
   this.elem.style.left = Math.floor(this.x) + 'px';
   this.elem.style.top = Math.floor(this.y) + 'px';
   this.elem.style.fontSize = this.s + 'px';

   if (this.x > r.width) {
   	this.s = this.x = 0;
 	}
   if (this.y > r.height) {
    this.s = this.y = 0;
   }
  }
};

for (var i=0; i<count; i++) {
	var e = document.createElement('i');
	e.className = 'fa fa-magic dynamic';
	e.id = "magic" + i;
	document.getElementsByTagName('body')[0].appendChild(e);
    sprites[i] = new Sprite(0, 0, e);
}

function update() {
	for (var i =0; i < sprites.length; i++) {
		sprites[i].update(10);
	}
}
window.setInterval(update, 50);

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/
	body {
	background: #f06;
	background: linear-gradient(45deg, #f0f, #f02);
	min-height: 100%;
	overflow: hidden;
	height: 100%;
	}
	h1 {
	font-family: sans-serif;
	color: #fff;
	}
	.dynamic {
	position: absolute;
	display: block;
	}
	.main {
	text-align:center;
	text-shadow: 0px 0px 200px #fff;

	}
	<!-- content to be placed inside <body>…</body> -->
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	<div class="main">
	<i class="fa fa-magic" style="font-size:20em"></i>
	<h1>sumisusan.com</h1>
	</div>
	// alert('Hello world!');

	var count = 20;
	var sprites = [];


	var Sprite = function (x,y, elem) {
	this.x = x;
	this.y = y;
	this.xv = Math.random();
	this.yv = Math.random();
	this.sv = Math.random();
	this.s = 0;
	this.elem = elem;
	};

	var r = document.body.getClientRects()[0];

	Sprite.prototype = {
	update: function (t) {
	this.x = this.x + this.xv * t;
	this.y = this.y + this.yv * t;
	this.s = this.s + this.sv * t * 0.1;
	this.elem.style.left = Math.floor(this.x) + 'px';
	this.elem.style.top = Math.floor(this.y) + 'px';
	this.elem.style.fontSize = this.s + 'px';

	if (this.x > r.width) {
	this.s = this.x = 0;
	}
	if (this.y > r.height) {
	this.s = this.y = 0;
	}
	}
	};

	for (var i=0; i<count; i++) {
	var e = document.createElement('i');
	e.className = 'fa fa-magic dynamic';
	e.id = "magic" + i;
	document.getElementsByTagName('body')[0].appendChild(e);
	sprites[i] = new Sprite(0, 0, e);
	}

	function update() {
	for (var i =0; i < sprites.length; i++) {
	sprites[i].update(10);
	}
	}
	window.setInterval(update, 50);