By skyforbes 
https://programmymuskegon.pagedrop.io/
To test it copy this code into the paste box + Press Go
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
background: #000;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="web"></canvas>
<script>
// — CONFIG —
const SLICES = 12; // kaleidoscope symmetry count
const RING_COUNT = 24; // how many concentric rings
const SPOKE_COUNT = 24; // how many spokes per slice (before mirroring)
const PULSE_SPEED = 0.0025; // how fast the whole web "breathes"
// setup canvas
const canvas = document.getElementById("web");
const ctx = canvas.getContext("2d");
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener("resize", resize);
// hsv -> rgb helper for nice spectral color
function hsvToRgb(h, s, v){
let f = (n,k=(n+h/60)%6)=>v – vsMath.max(Math.min(k,4-k,1),0);
return [f(5)255,f(3)255,f(1)*255];
}
// main render
let t = 0;
function draw(){
t += 1;
const w = canvas.width;
const h = canvas.height;
const cx = w/2;
const cy = h/2;
const baseRadius = Math.min(w,h)*0.45;
// slow "breathing" radius scale
const pulse = 1 + 0.08Math.sin(t * PULSE_SPEED * 2Math.PI);
// fade background slightly each frame for motion trails
ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(0,0,w,h);
ctx.save();
ctx.translate(cx, cy);
// For each kaleidoscope slice
for (let s=0; s<SLICES; s++){
const sliceAngle = (Math.PI*2)/SLICES;
ctx.save();
ctx.rotate(s * sliceAngle);
// mirror every other slice for kaleidoscope feel
if (s % 2 === 1){
ctx.scale(1,-1);
}
// color hue shifts with slice + time
const hue = ( (s*360/SLICES) + t*0.4 ) % 360;
const [r,g,b] = hsvToRgb(hue, 1, 1);
ctx.strokeStyle = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},0.9)`;
ctx.lineWidth = 1.5;
// draw concentric rings (web circles)
ctx.beginPath();
for (let k=1; k<=RING_COUNT; k++){
const rad = (k/RING_COUNT)*baseRadius*pulse;
// arc just for this slice (not full circle, so you see facets)
ctx.moveTo(rad,0);
ctx.arc(0,0,rad,0,sliceAngle,false);
}
ctx.stroke();
// draw spokes (radial lines)
ctx.beginPath();
for (let p=0; p<=SPOKE_COUNT; p++){
// spokeAngle runs inside THIS slice only
const spokeAngle = (p/SPOKE_COUNT)*sliceAngle;
const x = Math.cos(spokeAngle)*baseRadius*pulse;
const y = Math.sin(spokeAngle)*baseRadius*pulse;
ctx.moveTo(0,0);
ctx.lineTo(x,y);
}
ctx.stroke();
// little drifting sparkle nodes on ring intersections
for (let k=1; k<=RING_COUNT; k+=2){
const rad = (k/RING_COUNT)*baseRadius*pulse;
for (let p=0; p<=SPOKE_COUNT; p+=4){
const spokeAngle = (p/SPOKE_COUNT)*sliceAngle;
const drift = 0.02 * rad * Math.sin(t*0.015 + k*0.8 + p*0.4);
const x = Math.cos(spokeAngle)*(rad+drift);
const y = Math.sin(spokeAngle)*(rad+drift);
const nodeHue = (hue + k*4 + p*2 + t*0.6)%360;
const [nr,ng,nb] = hsvToRgb(nodeHue,1,1);
ctx.fillStyle = `rgba(${nr.toFixed(0)},${ng.toFixed(0)},${nb.toFixed(0)},0.8)`;
ctx.beginPath();
ctx.arc(x,y,2.2,0,Math.PI*2);
ctx.fill();
}
}
ctx.restore();
}
ctx.restore();
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Okay tho the whole point is now you have a space to test code for free! Its just a free online Sandbox.
Write your own code- JS CSS HTML – or team up w an AI!
🙂