Design Atlas
한국어
◆ Game UI & game feel

Minimap

미니맵

A scaled-down map tucked in a screen corner that keeps showing the player’s position relative to nearby enemies and allies at a glance.

Also known as: 레이더Radar
···
html
<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>
css
.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%)}
js
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);

A minimap projects real world coordinates onto a small circular or square viewport. Some games pin the player to the center and rotate the map itself (heading always up); others keep north fixed up and rotate only the player icon — either way, the direction on screen has to match the direction on the map.

Color alone should carry enemy/ally/objective meaning — red for hostile, green for friendly, yellow for objectives reads at a glance. Off-map targets that still matter get pinned as an arrow at the map's edge, so at least the direction survives.

Overload it — every item, every terrain line — and the dots blur into noise. Think of the minimap less as a shrunk full map and more as a separate summary of only what matters for the next decision.

When to use

Open-world or strategy screens where exploration and combat overlap. Skip it for linear stages or indoor puzzles where spatial awareness isn’t the bottleneck.