Constellation canvas

<canvas aria-label="Animated constellation background"></canvas><div class="caption"><span>CREATIVE CODING / 001</span><h1>Everything is<br>connected.</h1><p>A quiet experiment in points and possibility.</p></div>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:#080f20;overflow:hidden;padding:0}canvas{position:fixed;inset:0;width:100%;height:100%}.caption{position:relative;text-align:center;pointer-events:none}.caption>span{font-size:8px;letter-spacing:4px;color:#6cbad0}h1{font-size:44px;line-height:1.1;letter-spacing:-2px;font-weight:500;margin:20px 0;color:#d8eaf3}p{font-size:10px;letter-spacing:1px;color:#7793aa}

const canvas=document.querySelector("canvas"),ctx=canvas.getContext("2d");let w,h,points;function resize(){w=canvas.width=innerWidth;h=canvas.height=innerHeight;points=Array.from({length:55},()=>({x:Math.random()*w,y:Math.random()*h,vx:(Math.random()-.5)*.25,vy:(Math.random()-.5)*.25}));}resize();addEventListener("resize",resize);const reduced=matchMedia("(prefers-reduced-motion: reduce)").matches;function draw(){ctx.clearRect(0,0,w,h);for(const p of points){if(!reduced){p.x=(p.x+p.vx+w)%w;p.y=(p.y+p.vy+h)%h;}for(const q of points){let d=Math.hypot(p.x-q.x,p.y-q.y);if(d<120){ctx.strokeStyle=`rgba(62,161,205,${(1-d/120)*.22})`;ctx.beginPath();ctx.moveTo(p.x,p.y);ctx.lineTo(q.x,q.y);ctx.stroke();}}ctx.fillStyle="#80d2e3";ctx.beginPath();ctx.arc(p.x,p.y,1.2,0,Math.PI*2);ctx.fill();}if(!reduced)requestAnimationFrame(draw);}draw();