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

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

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

Alt
Opt
Find & Replace

Also see: Tab Triggers