Sorry, but we can’t find the page you requested.
Here’s something inspired by Bridget Riley instead.
import * as d3 from "npm:d3";
const height = Math.min(640, width);
const point = (cx, cy, r, a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
const circles = [];
const random = d3.randomLcg(42);
const n = 80;
let a = 0.2;
let x = width / 2;
let y = height / 2;
let r = Math.hypot(width, height) / 2;
let dr = r / 6.5;
while (r > 0) {
circles.push({x, y, r, a});
const t = random() * 2 * Math.PI;
const s = Math.sqrt((random() * dr * dr) / 4);
x += Math.cos(t) * s;
y += Math.sin(t) * s;
r -= dr;
a = -a;
}
const canvas = display(document.createElement("canvas"));
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
canvas.style.width = `${width}px`;
const context = canvas.getContext("2d");
context.scale(devicePixelRatio, devicePixelRatio);
(function frame(elapsed) {
context.save();
context.clearRect(0, 0, width, height);
context.translate(width / 2, height / 2);
context.rotate(Math.sin(elapsed / 50000));
context.translate(-width / 2, -height / 2);
context.beginPath();
for (let i = 0; i < n; ++i) {
let move = true;
d3.pairs(circles, ({x: x1, y: y1, r: r1, a: a1}, {x: x2, y: y2, r: r2, a: a2}) => {
const ai = ((i * 2) / n) * Math.PI;
context[move ? ((move = false), "moveTo") : "lineTo"](...point(x1, y1, r1, a1 + ai));
context.lineTo(...point(x2, y2, r2, a2 + ai));
});
d3.pairs(circles.slice().reverse(), ({x: x1, y: y1, r: r1, a: a1}, {x: x2, y: y2, r: r2, a: a2}) => {
const ai = ((i * 2 + 1) / n) * Math.PI;
context.lineTo(...point(x1, y1, r1, a1 + ai));
context.lineTo(...point(x2, y2, r2, a2 + ai));
});
context.closePath();
}
context.fillStyle = getComputedStyle(canvas).getPropertyValue("color");
context.fill();
context.restore();
if (canvas.isConnected) requestAnimationFrame(frame);
})();