<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
canvas{width:100%;height:100%;display:block}
</style></head>
<body><div class="stage"><canvas id="c"></canvas></div><script>var c=document.getElementById("c"),x=c.getContext("2d"),W,H,S=[];function rs(){W=c.width=innerWidth*devicePixelRatio;H=c.height=innerHeight*devicePixelRatio}rs();addEventListener("resize",rs);function n(s){s.x=Math.random()*2-1;s.y=Math.random()*2-1;s.z=1;s.pz=1}for(var i=0;i<800;i++){var s={};n(s);s.z=s.pz=Math.random();S.push(s)}function f(){x.fillStyle="rgba(8,10,16,.35)";x.fillRect(0,0,W,H);x.lineCap="round";S.forEach(function(s){s.pz=s.z;s.z-=.008;if(s.z<=.01){n(s);return}var k=W*.5,a=W/2+s.x/s.z*k*.5,b=H/2+s.y/s.z*k*.5,pa=W/2+s.x/s.pz*k*.5,pb=H/2+s.y/s.pz*k*.5;x.strokeStyle="rgba(200,220,255,"+(1-s.z)+")";x.lineWidth=(1-s.z)*2.5*devicePixelRatio;x.beginPath();x.moveTo(pa,pb);x.lineTo(a,b);x.stroke()});requestAnimationFrame(f)}f();</script></body></html>