SiLK V

forked from SleepyHarry's block: SiLK I

forked from SleepyHarry's block: SiLK II

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiLK</title>

var margin = {top: 20, right: 20, bottom: 20, left: 20},
  	  width = canvas.width - margin.left - margin.right,
    	height = canvas.height - margin.top - margin.bottom;

context.translate(margin.left, margin.top);

context.fillStyle = d3.rgb(0, 0, 0, 0.01);
	context.strokeStyle = d3.rgb(255, 255, 255);
  
  
	var degToRad = Math.PI / 180,
      r = d3.min([width, height]) / 2,
      apeture = 0.8,
      centre = [width / 2, height / 2];
  
  r /= apeture;  // pre-compensate for what we're about to clip away
  
	context.arc(centre[0], centre[1], r * apeture, 0, 2 * Math.PI);
  context.clip();

var toPt = function (i) {
    return [
      width  / 2 + r * Math.cos(degToRad * i),
      height / 2 + r * Math.sin(degToRad * i)
    ];
	};

var i = 0,
  	  skip = 90,
    	flip = true,
	    anchor = 360,
      lastAngle = i;

var nextPt = function () {
		var newAngle = lastAngle;

while (Math.abs(newAngle - lastAngle) < 90) {
      newAngle = Math.random() * 360;
    }
    lastAngle = newAngle;
    
    return toPt(newAngle);
  };

var fade = function () {
    context.fillRect(0, 0, width, height);
	};

var step = function () {
    fade();

var [x, y] = nextPt();

context.beginPath();
    context.moveTo(lastPt[0], lastPt[1]);
//     context.lineTo(x, y);
    context.quadraticCurveTo(centre[0], centre[1], x, y)
    context.stroke();

lastPt = [x, y];
	};

var lastPt = nextPt(),
  	  ticker = setInterval(step, 50);
</script>

</body>
</html>

https://d3js.org/d3.v4.min.js