ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body style="margin:0;overflow:hidden">
<canvas></canvas>
<script>

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

var W = Math.max(
	document.body.clientWidth,
	document.body.scrollWidth,
	document.documentElement.scrollWidth,
	document.documentElement.clientWidth
);

var H = Math.max(
	document.body.clientHeight,
	document.body.scrollHeight,
	document.documentElement.scrollHeight,
	document.documentElement.clientHeight
);

canvas.width = W;
canvas.height = H;

const scale = 10;

(function loop (c, level) {

	if (level > 14) {
		return;
	}

	context.clearRect(0, 0, W, H);

	const turns = [c];

	for (let i = 0; i < level; i++) {
		turns.push(c, ...turns.slice(0).reverse().map((e) => -e));
	}

	context.beginPath();
	context.moveTo(W / 2, H / 2);

	let th = 0;
	let last_x = W / 2;
	let last_y = H / 2;

	for (let i = 0; i < turns.length; i++) {
		th += (Math.PI / 2) * turns[i];
		const x = Math.cos(th);
		const y = Math.sin(th);
		context.lineTo(
			last_x += x * scale,
			last_y += y * scale
		);
	}

	context.stroke();

	if (c >= 1) {
		// setTimeout(function () {
		// 	loop(0, level + 1);
		// }, 500);
		return;
	}

	requestAnimationFrame(function () {
		loop(c * 1.01, level);
	});

})(0.01, 10);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body style="margin:0;overflow:hidden">
	<canvas></canvas>
	<script>

	const canvas = document.querySelector('canvas');
	const context = canvas.getContext('2d');

	var W = Math.max(
	document.body.clientWidth,
	document.body.scrollWidth,
	document.documentElement.scrollWidth,
	document.documentElement.clientWidth
	);

	var H = Math.max(
	document.body.clientHeight,
	document.body.scrollHeight,
	document.documentElement.scrollHeight,
	document.documentElement.clientHeight
	);

	canvas.width = W;
	canvas.height = H;

	const scale = 10;

	(function loop (c, level) {

	if (level > 14) {
	return;
	}

	context.clearRect(0, 0, W, H);

	const turns = [c];

	for (let i = 0; i < level; i++) {
	turns.push(c, ...turns.slice(0).reverse().map((e) => -e));
	}

	context.beginPath();
	context.moveTo(W / 2, H / 2);

	let th = 0;
	let last_x = W / 2;
	let last_y = H / 2;

	for (let i = 0; i < turns.length; i++) {
	th += (Math.PI / 2) * turns[i];
	const x = Math.cos(th);
	const y = Math.sin(th);
	context.lineTo(
	last_x += x * scale,
	last_y += y * scale
	);
	}

	context.stroke();

	if (c >= 1) {
	// setTimeout(function () {
	// loop(0, level + 1);
	// }, 500);
	return;
	}

	requestAnimationFrame(function () {
	loop(c * 1.01, level);
	});

	})(0.01, 10);

	</script>
	</body>
	</html>