솔리드 드로잉

<div class="split">
  <div class="panel">
    <span class="tag">Flat</span>
    <i class="ball flat"></i>
  </div>
  <div class="panel">
    <span class="tag">Solid</span>
    <i class="ball solid"></i>
  </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(46%,110px);aspect-ratio:1;border-radius:50%}
.flat{background:var(--accent)}
.solid{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 68% 78%, rgba(0,0,0,.32), rgba(0,0,0,0) 55%),
    var(--accent-3);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  animation:turn 3.4s linear infinite;
}
@keyframes turn{0%{transform:scaleX(1)}50%{transform:scaleX(.55)}100%{transform:scaleX(1)}}