xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiLK</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
background: #000000;
}
</style>
</head>
<body>
<canvas width=960 height=500></canvas>
<script>
var canvas = d3.select('canvas').node(),
context = canvas.getContext('2d');
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