Design Atlas
한국어
⌘ UX terms & laws

Gestalt: Closure

게슈탈트: 폐쇄성

The brain fills in missing pieces to perceive a complete shape — even when the outline is literally broken.

Also known as: Law of ClosureKanizsa triangle
···
html
<div class="stage">
  <div class="pac p1"></div>
  <div class="pac p2"></div>
  <div class="pac p3"></div>
  <svg class="tri" viewBox="0 0 100 100"><polygon points="50,30 32,68 68,68" /></svg>
</div>
css
.stage{position:relative;width:60%;height:80%;min-width:180px}
.pac{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -30deg,var(--fg) 0deg 300deg,transparent 300deg 360deg)}
.p1{left:33%;top:0;transform:rotate(90deg)}
.p2{left:0;bottom:0;transform:rotate(-36deg)}
.p3{right:0;bottom:0;transform:rotate(216deg)}
.tri{position:absolute;inset:0;width:100%;height:100%}
.tri polygon{fill:none;stroke:var(--accent);stroke-width:2.5;opacity:.15;animation:reveal 3s ease-in-out infinite}
@keyframes reveal{0%,100%{opacity:.08}50%{opacity:.7}}

A case under the Gestalt Law of Prägnanz, most famously demonstrated by Italian psychologist Gaetano Kanizsa in his 1955 "Kanizsa triangle." Arrange three Pac-Man-like notched circles into a triangle, and viewers see the outline of a white triangle that doesn't actually exist.

Logos (WWF's panda, the NBC peacock) and loading spinners (a partial ring still reads as a circle) both exploit this: you don't need to draw every part for the shape to register. Trimming unnecessary lines and borders still leaves users perceiving the full form.

Around the three Pac-Men below, a faint triangle outline fades in and out — a reminder that no line is actually drawn there.

When to use

Use this when reducing an icon, logo, or loading indicator to the fewest possible strokes. Test it though — oversimplify and the meaning can drop out entirely.