오버프린트

<div class="stage" id="stage">
  <div class="paper"></div>
  <div class="cyan"></div>
  <div class="hole" id="hole"></div>
  <div class="ink" id="ink"></div>
  <div class="tag" id="tag"></div>
</div>

.stage{position:relative;width:min(220px,58%);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.paper{position:absolute;inset:0;background:#f4f3ee}
.cyan{position:absolute;inset:8%;border-radius:50%;background:#00b6d8}
.hole{position:absolute;width:32%;height:32%;left:34%;top:34%;border-radius:50%;background:#f4f3ee}
.ink{position:absolute;width:32%;height:32%;top:34%;border-radius:50%;background:#101014;animation:shift 3s ease-in-out infinite}
@keyframes shift{0%,100%{left:34%}50%{left:46%}}
.stage.overprint .hole{display:none}
.stage.overprint .ink{mix-blend-mode:multiply}
.tag{position:absolute;left:0;right:0;bottom:0;padding:7px 4px;text-align:center;font:700 10px/1.3 system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.6)}

const stage = document.getElementById('stage');
const tag = document.getElementById('tag');
let over = false;
function apply(){
  stage.classList.toggle('overprint', over);
  tag.textContent = over ? '오버프린트 — 흰 틈 없음' : '녹아웃 — 판이 밀리면 흰 틈';
}
apply();
setInterval(() => { over = !over; apply(); }, 2400);