JSFiddle - React, Tailwind, and code Playground

HTML

<html>
   <head>
		<script type="text/javascript">
			function left(v)
			{
				x = v[0];
				y = v[1];
				v[0] = y;
				v[1] = -x;
			}
			function right(v)
			{
				x = v[0];
				y = v[1];
				v[0] = -y;
				v[1] = x;
			}
			function fwd(ctx,v,x)
			{
				x[0] += v[0];
				x[1] += v[1];
				ctx.lineTo(x[0],x[1]);
			}
			function A(ctx,v,x,k)
			{
				if (k > 0)
				{
					left(v);
					B(ctx,v,x,k-1);
					fwd(ctx,v,x);
					right(v);
					A(ctx,v,x,k-1);
					fwd(ctx,v,x);
					A(ctx,v,x,k-1);
					right(v);
					fwd(ctx,v,x);
					B(ctx,v,x,k-1);
					left(v);					
				}
			}
			function B(ctx,v,x,k)
			{
				if (k > 0)
				{
					right(v);
					A(ctx,v,x,k-1);
					fwd(ctx,v,x);
					left(v);
					B(ctx,v,x,k-1);
					fwd(ctx,v,x);
					B(ctx,v,x,k-1);
					left(v);
					fwd(ctx,v,x);
					A(ctx,v,x,k-1);
					right(v);					
				}
			}
		    function doit()
			{
				var maindiv = document.getElementById('container');
				var r0 = 800;
				for (var k = 0; k < 10; ++k)
				{
					var f = Math.pow(0.5,k);
					var r = r0*f;
					var v = [r,0];
					var x = [r0*f/2, 2*r0 - r0*f/2];
					var subdiv = document.createElement('div');
					var canvas = document.createElement('canvas');
					canvas.setAttribute('width',r0*2);
					canvas.setAttribute('height',r0*2);
					var p = document.createElement('p');
					subdiv.appendChild(p);
					subdiv.appendChild(canvas);
					maindiv.appendChild(subdiv);

					var ctx=canvas.getContext('2d');
					ctx.beginPath();
					ctx.moveTo(x[0],x[1]);
					A(ctx,v,x,k+1);
					ctx.stroke();
					
					var text = document.createTextNode('Hilbert curve, iteration '+(k+1)+', '+(1 << (2*k+2))+' points');
					p.appendChild(text);

				}
			}
			window.onload = doit;
		</script>
   </head>
   <body>
      <div id="container"></div>
   </body>
</html>