미니맵

<div class="mmwrap"><div class="mm"><div class="fog" id="fog"></div><div class="grid"></div>
<div class="blip me"></div><div class="blip en" id="b1"></div><div class="blip en" id="b2"></div><div class="blip ally" id="b3"></div>
<div class="edgewrap" id="edgewrap"><div class="edge"></div></div></div></div>

.mmwrap{width:min(72%,220px);aspect-ratio:1}
.mm{position:relative;width:100%;height:100%;border-radius:50%;background:var(--surface);border:2px solid var(--line);overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20% 20%;opacity:.5}
.fog{position:absolute;left:50%;top:50%;width:140%;height:140%;margin:-70% 0 0 -70%;background:conic-gradient(from 0deg, color-mix(in srgb,var(--accent) 20%,transparent), transparent 40deg);transform-origin:center}
.blip{position:absolute;width:9%;height:9%;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.me{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.en{background:var(--accent-2)}
.ally{background:var(--accent-3)}
.edgewrap{position:absolute;inset:0;transform-origin:50% 50%}
.edge{position:absolute;top:2%;left:50%;width:9%;height:9%;transform:translateX(-50%);background:var(--accent-2);clip-path:polygon(50% 0,0 100%,100% 100%)}

const fog=document.getElementById('fog');
const b1=document.getElementById('b1'), b2=document.getElementById('b2'), b3=document.getElementById('b3');
const edgewrap=document.getElementById('edgewrap');
let t=0;
function loop(){
  t+=0.02;
  fog.style.transform='rotate('+((t*40)%360)+'deg)';
  b1.style.transform='translate(calc(-50% + '+(Math.cos(t*0.8)*32)+'%), calc(-50% + '+(Math.sin(t*0.8)*32)+'%))';
  b2.style.transform='translate(calc(-50% + '+(Math.cos(t*1.3+2)*26)+'%), calc(-50% + '+(Math.sin(t*1.3+2)*26)+'%))';
  b3.style.transform='translate(calc(-50% + '+(Math.cos(t*0.5+4)*20)+'%), calc(-50% + '+(Math.sin(t*0.5+4)*20)+'%))';
  edgewrap.style.transform='rotate('+((t*16)%360)+'deg)';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);