어필

<div class="split">
  <div class="panel">
    <span class="tag">Plain circle</span>
    <i class="ball"></i>
  </div>
  <div class="panel">
    <span class="tag">Appeal</span>
    <svg class="bean-svg" viewBox="0 0 100 100">
      <path class="bean" d="M50,12 C72,10 88,28 86,50 C88,74 68,90 46,88 C24,90 10,70 12,48 C10,26 28,14 50,12 Z"/>
      <ellipse class="eye e1" cx="40" cy="46" rx="5" ry="7"/>
      <ellipse class="eye e2" cx="62" cy="44" rx="5" ry="7"/>
      <path class="mouth" d="M38,63 Q52,74 66,60" fill="none" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
  </div>
</div>

.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:grid;place-items:center}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.ball{width:min(42%,100px);aspect-ratio:1;border-radius:50%;background:var(--muted);opacity:.7}
.bean-svg{width:min(52%,130px);aspect-ratio:1}
.bean{fill:var(--accent-3);animation:breathe 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.97)}}
.eye{fill:var(--fg);transform-box:fill-box;transform-origin:center;animation:blink 4.2s ease-in-out infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.mouth{stroke:var(--fg)}