A Pen By
Robert
Pro

` ````
canvas#canvas
```

` ````
body { background: black; overflow: hidden; }
```

` ````
const rn = (min, max) => Math.random() * (max - min) + min;
const {sin, cos, tan, atan2, sqrt, hypot, pow, PI} = Math;
const TWO_PI = PI * 2;
const HALF_PI = PI / 2;
const RAD_PI = PI / 180;
const ctx = canvas.getContext('2d');
let {innerWidth:w, innerHeight:h} = window;
canvas.width = w;
canvas.height = h;
let tick = 100;
const draw = () => {
request = requestAnimationFrame(() => draw());
tick++;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0,0,w,h);
ctx.fill();
ctx.save();
ctx.translate(w/2,h/2);
let count = 9;
let rad = 200;
let posArr = [];
for(let i = 0; i < count; i++) {
const x = rad * sin(tick / 200) * cos((tick / 10 + (360 / count * i)) * RAD_PI) + sin((tick * 10 + i ** 3) * RAD_PI);
const y = rad * cos(tick / 100) * sin((tick / 10 + (360 / count * i)) * RAD_PI) + cos((tick * 10 + i ** 3) * RAD_PI);
ctx.strokeStyle = `hsl(${20 * Math.sin(i * tick / 100) + 200},50%,40%)`;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, 10, 0, TWO_PI);
ctx.stroke();
posArr = [...posArr, { x, y }];
}
ctx.lineWidth = .1;
ctx.strokeStyle = `hsl(${20 * Math.sin(tick / 100)},50%,40%)`;
for(let i = 0; i < posArr.length; i++) {
for(let j = 0; j < posArr.length; j++) {
ctx.beginPath();
const offset = 30;
let angle = atan2(posArr[j].y - posArr[i].y, posArr[j].x - posArr[i].x);
ctx.moveTo(posArr[i].x + offset * cos(angle), posArr[i].y + offset * sin(angle));
ctx.lineTo(posArr[j].x + offset * cos(angle), posArr[j].y + offset * sin(angle));
ctx.closePath();
ctx.stroke();
}
}
ctx.restore();
}
const resize = () => {
canvas.width = w = window.innerWidth;
canvas.height = h = window.innerHeight;
}
let request = requestAnimationFrame(() => draw());
window.addEventListener('resize', () => resize());
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers