Edit on
<!--
Original Flash : http://archive.phong.com/astro/fractal/circles.php
-->
html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
	user-select: none;
}
body {
	position: absolute;
	margin: 0px;
	padding: 0px;
	background: #fff; 
	width: 100%;
	height: 100%;
}
canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff; 
}
! function ()
{
	"use strict";
	var canvas = new ge1doot.Canvas();
	var ctx = canvas.ctx;
	var pointer = canvas.pointer;
	var size = Math.round(Math.min(canvas.height, canvas.width) * 0.95);
	if (size / 2 != Math.round(size / 2)) size--;
	var shape = function (d, color)
	{
		var colors = ['#182453','#182453', '#182453', '#182453', '#182453'];
		var shape = document.createElement('canvas');
		shape.width = d;
		shape.height = d;
		var ict = shape.getContext('2d');
		ict.beginPath();
		ict.arc(d / 2, d / 2, d / 2 - 1, 0, Math.PI);
		ict.closePath();
		ict.fillStyle = colors[color];
		ict.fill();
		ict.beginPath();
		ict.arc(d / 4, d / 2, d / 4 + 1, 0, Math.PI * 2);
		ict.closePath();
		ict.fillStyle = '#fff';
		ict.fill();
		ict.beginPath();
		ict.arc(d / 2 + d / 4, d / 2, d / 4 + 1, 0, Math.PI * 2);
		ict.closePath();
		ict.fill();
		return shape;
	}
	
	var Wave = function (x, y, w, level)
	{
		this.x = x;
		this.y = y;
		this.a = 0;
		this.w = w;
		this.h = 0;
		this.start = false;
		this.shape = shape(w, level);
		if (level > 0)
		{
			level--;
			this.left = new Wave(-w / 4, 0, w / 2, level);
			this.right = new Wave(w / 4, 0, w / 2, level);
		}
	}
	Wave.prototype.draw = function ()
	{
		var dx = pointer.x - this.x;
		var dy = pointer.y - this.y;
		var ang = Math.atan2(dx, -dy);
		ang = ang % (2 * Math.PI);
		if (Math.abs(ang - this.a) > Math.PI)
		{
			if (ang < this.a)  this.a -= 2 * Math.PI;
			else this.a += 2 * Math.PI;
		}
		this.a += (ang - this.a) / (this.w / 4);
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.rotate(this.a);
		ctx.drawImage(this.shape, -this.h * 0.5, -this.h * 0.5, this.h, this.h);
		if (this.start)
		{
			dx = this.w - this.h;
			this.h += dx / 20;
			if (dx < this.w / 4 && this.left)
			{
				this.left.start = true;
				this.right.start = true;
			}
		}
		ctx.restore();
		if (this.left)
		{
			var c = Math.cos(this.a);
			var s = Math.sin(this.a);
			this.left.x = this.x - c * this.w / 4;
			this.left.y = this.y - s * this.w / 4;
			this.right.x = this.x + c * this.w / 4;
			this.right.y = this.y + s * this.w / 4;
			this.left.draw();
			this.right.draw();
		}
	}
	var sea = new Wave(canvas.width / 2, canvas.height / 2, size, 4);
	sea.start = true;
	var run = function ()
	{
		requestAnimationFrame(run);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		sea.draw();
	}
	run();
}();
Rerun