lehni/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Rounded Rectangles</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var mousePoint = view.center;
		var amount = 25;
		var colors = ['red', 'white', 'blue', 'white'];

		for (var i = 0; i < amount; i++) {
			var rect = new Rectangle([0, 0], [25, 25]);
			rect.center = mousePoint;
			var path = new Path.RoundRectangle(rect, 6);
			path.fillColor = colors[i % 4];
			var scale = (1 - i / amount) * 20;
			path.scale(scale);
		}

		function onMouseMove(event) {
			mousePoint = event.point;
		}

		var children = project.activeLayer.children;
		function onFrame(event) {
			for (var i = 0, l = children.length; i < l; i++) {
				var item = children[i];
				var delta = (mousePoint - item.position) / (i + 5);
				item.rotate(Math.sin((event.count + i) / 10) * 7);
				if (delta.length > 0.1)
					item.position += delta;
			}
		}
	</script>
</head>
<body style="margin: 0; overflow: hidden;">
	<canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Rounded Rectangles</title>
	<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
	var mousePoint = view.center;
	var amount = 25;
	var colors = ['red', 'white', 'blue', 'white'];

	for (var i = 0; i < amount; i++) {
	var rect = new Rectangle([0, 0], [25, 25]);
	rect.center = mousePoint;
	var path = new Path.RoundRectangle(rect, 6);
	path.fillColor = colors[i % 4];
	var scale = (1 - i / amount) * 20;
	path.scale(scale);
	}

	function onMouseMove(event) {
	mousePoint = event.point;
	}

	var children = project.activeLayer.children;
	function onFrame(event) {
	for (var i = 0, l = children.length; i < l; i++) {
	var item = children[i];
	var delta = (mousePoint - item.position) / (i + 5);
	item.rotate(Math.sin((event.count + i) / 10) * 7);
	if (delta.length > 0.1)
	item.position += delta;
	}
	}
	</script>
	</head>
	<body style="margin: 0; overflow: hidden;">
	<canvas id="canvas" resize></canvas>
	</body>
	</html>