thole/index.html

## index.html
<!DOCTYPE HTML>
<html>
  <head>
  <style>
    body {
      background-color: #1e1e20;
    }
  </style>
  <script src="//pixijs.download/v4.5.5/pixi.min.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>

  </head>
<body>
 <script>


var height = 1000;
var width = 1400;

var renderer = PIXI.autoDetectRenderer(width, height, { antialias: true });
renderer.backgroundColor = 0x1e1e20;
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
stage.scale.set(1)
var graphics = new PIXI.Graphics();


var n=13;
var sc=7;
var hsh=-400
var vsh=-450
var c=c1=c2=c2x=c2y=x=y=0, d=1, n=1<<n;
hsh=Number(hsh); vsh=Number(vsh);
x=height/2
y=height/2;

var colorScale = d3.scale.quantize()
      .domain([0,n])
      .range([0x9e0142,0xd53e4f,0xf46d43,0xfdae61,0xfee08b,0xffffbf,0xe6f598,0xabdda4,0x66c2a5,0x3288bd,0x5e4fa2]);

stage.addChild(graphics);

var lastDot = null;
var i = 0;


animate();


function addLines(numberOfLines) {
  var lastLine = i + numberOfLines;

  while(i < lastLine){
    var dot = [(x+hsh)*sc,(y+vsh)*sc];
    if(lastDot != null){
      graphics.moveTo(lastDot[0],lastDot[1]);
      graphics.lineStyle(1, colorScale(i), 0.5);
      graphics.lineTo(dot[0],dot[1]);
      graphics.endFill();

    }
    lastDot = dot;
    c1=c&1; c2=c&2;
    c2x=1*d; if(c2>0) {c2x=(-1)*d}; c2y=(-1)*c2x;
    if(c1>0) {y+=c2y} else {x+=c2x}
    i++; c+=i/(i&-i);
  }
}

function animate() {
   if (i>n){return;}
   addLines(5);

   renderer.render(stage);
   requestAnimationFrame( animate );
}

    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	background-color: #1e1e20;
	}
	</style>
	<script src="//pixijs.download/v4.5.5/pixi.min.js"></script>
	<script src="//d3js.org/d3.v3.min.js"></script>

	</head>
	<body>
	<script>


	var height = 1000;
	var width = 1400;

	var renderer = PIXI.autoDetectRenderer(width, height, { antialias: true });
	renderer.backgroundColor = 0x1e1e20;
	document.body.appendChild(renderer.view);

	var stage = new PIXI.Container();
	stage.scale.set(1)
	var graphics = new PIXI.Graphics();


	var n=13;
	var sc=7;
	var hsh=-400
	var vsh=-450
	var c=c1=c2=c2x=c2y=x=y=0, d=1, n=1<<n;
	hsh=Number(hsh); vsh=Number(vsh);
	x=height/2
	y=height/2;

	var colorScale = d3.scale.quantize()
	.domain([0,n])
	.range([0x9e0142,0xd53e4f,0xf46d43,0xfdae61,0xfee08b,0xffffbf,0xe6f598,0xabdda4,0x66c2a5,0x3288bd,0x5e4fa2]);

	stage.addChild(graphics);

	var lastDot = null;
	var i = 0;


	animate();


	function addLines(numberOfLines) {
	var lastLine = i + numberOfLines;

	while(i < lastLine){
	var dot = [(x+hsh)sc,(y+vsh)sc];
	if(lastDot != null){
	graphics.moveTo(lastDot[0],lastDot[1]);
	graphics.lineStyle(1, colorScale(i), 0.5);
	graphics.lineTo(dot[0],dot[1]);
	graphics.endFill();

	}
	lastDot = dot;
	c1=c&1; c2=c&2;
	c2x=1d; if(c2>0) {c2x=(-1)d}; c2y=(-1)*c2x;
	if(c1>0) {y+=c2y} else {x+=c2x}
	i++; c+=i/(i&-i);
	}
	}

	function animate() {
	if (i>n){return;}
	addLines(5);

	renderer.render(stage);
	requestAnimationFrame( animate );
	}

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