<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html,body{margin:0;padding:0;overflow:hidden;background:#000}canvas{display:block}</style></head><body><canvas id="canvas"></canvas><script>
const c=document.getElementById('canvas'),x=c.getContext('2d');let w=c.width=innerWidth,h=c.height=innerHeight,d=[];const g=()=>['#ff0080','#00ffff','#39ff14','#ff4500','#ffcc00','#00ff99','#ff66cc','#9966ff','#ff4444','#66ff66','#00ccff','#ffff33'][Math.floor(Math.random()*12)];for(let i=0;i<50;i++)d.push({x:Math.random()*w,y:Math.random()*h,dx:(Math.random()-.5)*2,dy:(Math.random()-.5)*2,r:20+Math.random()*4,a:Math.random()*Math.PI*2,s:(Math.random()-.5)*.05,c:g()});const draw=(ctx,r)=>{ctx.fillStyle=ctx.strokeStyle;ctx.beginPath();ctx.ellipse(0,-r*0.95,r*0.35,r*0.45,0,0,2*Math.PI);ctx.fill();ctx.beginPath();ctx.moveTo(-r*0.25,-r*0.5);ctx.lineTo(-r*0.25,r*0.4);ctx.lineTo(r*0.25,r*0.4);ctx.lineTo(r*0.25,-r*0.5);ctx.closePath();ctx.fill();ctx.beginPath();ctx.ellipse(-r*0.22,r*0.5,r*0.22,r*0.25,0,0,2*Math.PI);ctx.fill();ctx.beginPath();ctx.ellipse(r*0.22,r*0.5,r*0.22,r*0.25,0,0,2*Math.PI);ctx.fill();};c.onmousemove=e=>{d.forEach(o=>{let dx=o.x-e.clientX,dy=o.y-e.clientY,dist=Math.sqrt(dx*dx+dy*dy);if(dist<80){o.dx+=dx/dist;o.dy+=dy/dist;}})};const loop=()=>{x.clearRect(0,0,w,h);d.forEach(o=>{o.x+=o.dx;o.y+=o.dy;o.a+=o.s;if(o.x<0||o.x>w)o.dx*=-1;if(o.y<0||o.y>h)o.dy*=-1;x.save();x.translate(o.x,o.y);x.rotate(o.a);x.fillStyle=o.c;x.strokeStyle=o.c;draw(x,o.r);x.restore();});requestAnimationFrame(loop)};loop();onresize=()=>{w=c.width=innerWidth;h=c.height=innerHeight};
</script></body></html>
