Design Atlas
한국어
▣ Presentation & slides

Visual Metaphor Slide

시각적 메타포 슬라이드

Instead of explaining an abstract idea in sentences, mapping it onto a shape the audience already understands — a funnel, a bridge, a staircase.

Also known as: Concept visualizationMetaphor diagram
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <ul class="bl"><li id="b1"></li><li id="b2"></li><li id="b3"></li></ul>
  <div class="funnel">
    <svg viewBox="0 0 100 70" preserveAspectRatio="none">
      <polygon points="5,5 95,5 70,35 30,35" class="seg s1"></polygon>
      <polygon points="30,35 70,35 58,55 42,55" class="seg s2"></polygon>
      <polygon points="42,55 58,55 53,68 47,68" class="seg s3"></polygon>
    </svg>
    <div class="flabels"><span id="f1"></span><span id="f2"></span><span id="f3"></span></div>
  </div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:7vmin 8vmin}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.bl{margin:0;padding-left:1.2em;height:100%;display:flex;flex-direction:column;justify-content:center;gap:6%}
.bl li{font:600 clamp(9px,2.4vmin,13px)/1.4 -apple-system,sans-serif;color:var(--fg)}
.funnel{display:none;height:100%;align-items:center;justify-content:center;gap:8%}
.slide.good .bl{display:none}
.slide.good .funnel{display:flex}
.funnel svg{width:44%;height:82%}
.s1{fill:var(--accent)}
.s2{fill:var(--accent-3)}
.s3{fill:var(--accent-2)}
.flabels{display:flex;flex-direction:column;justify-content:space-between;height:70%}
.flabels span{font:700 clamp(8px,2vmin,11px)/1.2 -apple-system,sans-serif;color:var(--muted)}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 문장 설명', '✓ 도형 하나'], b: ['리드 1,000명이 들어온다', '그중 200명만 검증된다', '최종 40명이 고객이 된다'], f: ['리드 1,000', '검증 200', '고객 40'] },
  en: { badge: ['✕ Sentences', '✓ One shape'], b: ['1,000 leads come in', 'Only 200 get qualified', '40 finally become customers'], f: ['1,000 leads', '200 qualified', '40 customers'] },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('b1').textContent = t.b[0]; el('b2').textContent = t.b[1]; el('b3').textContent = t.b[2];
  el('f1').textContent = t.f[0]; el('f2').textContent = t.f[1]; el('f3').textContent = t.f[2];
}
render();
setInterval(() => { n++; render(); }, 2200);

"Leads come in, a fraction of them get qualified, and fewer still become customers" takes two or three reads to picture. Draw the same idea as a funnel, and the shape narrowing from top to bottom does the explaining by itself.

The demo's ✕ lists that process as three bullet sentences. The ✓ places the same three stages on an actual funnel shape, so the narrowing shape itself instantly communicates that the numbers are shrinking.

Checklist: is the metaphor a shape that reads the same across cultures and languages — a funnel, a staircase, a bridge — are labels on the shape kept to a minimum, is the metaphor actually a good fit for the content instead of a forced comparison.

When to use

Use it for concepts whose shape can carry meaning on its own — a process, a funnel, a growth curve.