<!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;function rs(){W=c.width=innerWidth*devicePixelRatio;H=c.height=innerHeight*devicePixelRatio}rs();addEventListener("resize",rs);var t0=performance.now();function f(n){var t=(n-t0)/1000;x.fillStyle="#0f0f10";x.fillRect(0,0,W,H);var cols=40,rows=24,gx=W/cols,gy=H/rows;for(var i=0;i<cols;i++)for(var j=0;j<rows;j++){var dx=i-cols/2,dy=(j-rows/2)*1.4,d=Math.sqrt(dx*dx+dy*dy),p=Math.max(0,Math.sin(d*.35-t*3));x.fillStyle=p>.6?"#7dd3b0":"rgba(168,162,158,"+(.25+p*.6)+")";x.beginPath();x.arc(gx*(i+.5),gy*(j+.5),(1.2+p*3.5)*devicePixelRatio,0,6.283);x.fill()}requestAnimationFrame(f)}requestAnimationFrame(f);</script></body></html>