Figure-Ground

전경-배경

The eye splits any scene into a foreground shape and a background — and which is which can flip depending on colour and contrast.

Also known as: Figure/groundRubin's vase

···

html

<svg class="fg" viewBox="0 0 100 100">
  <path id="blobA" d="M50,4 C74,4 84,22 78,38 C90,44 90,60 78,64 C84,80 74,96 50,96 C26,96 16,80 22,64 C10,60 10,44 22,38 C16,22 26,4 50,4 Z"/>
</svg>

css

.fg{width:60%;height:80%;min-width:150px}
#blobA{transition:fill 1.2s ease,stroke 1.2s ease}

const blob = document.getElementById('blobA');
const svg = document.querySelector('.fg');
let a = true;
function apply() {
  blob.style.fill = a ? 'var(--fg)' : 'var(--bg)';
  svg.style.background = a ? 'var(--bg)' : 'var(--fg)';
  blob.style.stroke = a ? 'none' : 'var(--line)';
}
apply();
setInterval(() => { a = !a; apply(); }, 2000);

Danish psychologist Edgar Rubin's 1915 "Rubin's vase" is the classic case — the same image reads as a black vase or as two facing profiles, and which one is "figure" versus "ground" hinges purely on colour and contrast.

In UI, this is why modals dim the background (pushing the dialog forward as figure), and why designers double-check that the negative space in an icon doesn't accidentally read as its own shape. Baking a hidden shape into negative space — the FedEx arrow — is the same principle used deliberately.

Below, the two interlocking blobs swap which one reads as "figure" every time the colours invert — same shapes, different perception.

When to use

Check whether the negative space in an icon or logo also reads as an intentional shape. For modals and popovers, dim the background to keep the foreground unambiguous.