렌즈 플레어

<div class="stage">
  <div class="src" id="src"></div>
  <i class="fl" id="f0"></i><i class="fl" id="f1"></i><i class="fl" id="f2"></i><i class="fl" id="f3"></i><i class="fl" id="f4"></i>
</div>

.stage{position:absolute;inset:0;background:linear-gradient(180deg,#0a0a16,#04040a);overflow:hidden}
.src{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0,#ffe9b0 40%,transparent 72%);
  box-shadow:0 0 40px 14px rgba(255,220,150,.55);transform:translate(-50%,-50%)}
.fl{position:absolute;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen}
#f0{width:4%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)}
#f1{width:7%;aspect-ratio:1;background:radial-gradient(circle,rgba(140,220,255,.55),transparent 70%)}
#f2{width:3%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,140,200,.6),transparent 70%)}
#f3{width:10%;aspect-ratio:1;border:1px solid rgba(200,220,255,.35);
  background:radial-gradient(circle,transparent 55%,rgba(200,220,255,.12) 70%,transparent 85%)}
#f4{width:5%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,214,140,.5),transparent 70%)}

const src=document.getElementById('src');
const dots=['f0','f1','f2','f3','f4'].map(id=>document.getElementById(id));
const fracs=[0.35,0.62,1,1.35,1.75];
function frame(t){
  const time=t*0.00045;
  const sx=50+Math.sin(time)*36;
  const sy=28+Math.sin(time*1.3)*14+8;
  src.style.left=sx+'%'; src.style.top=sy+'%';
  const cx=50, cy=50, dx=cx-sx, dy=cy-sy;
  dots.forEach((d,i)=>{
    const k=fracs[i];
    d.style.left=(sx+dx*k)+'%';
    d.style.top=(sy+dy*k)+'%';
  });
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);