녹아웃

<div class="stage" id="stage">
  <div class="colors"></div>
  <div class="letter" id="letter">K</div>
  <div class="tag" id="tag"></div>
</div>

.stage{position:relative;isolation:isolate;background:#fff;width:min(230px,60%);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center}
.colors{position:absolute;inset:0;background-image:
    radial-gradient(circle at 25% 25%,#00b6d8 30%,transparent 32%),
    radial-gradient(circle at 65% 40%,#ff2ec4 30%,transparent 32%),
    radial-gradient(circle at 40% 70%,#ffe600 30%,transparent 32%);
  background-size:11px 11px;background-position:0 0,4px 4px,7px 2px;mix-blend-mode:multiply}
.letter{position:relative;font:900 96px/1 system-ui,sans-serif;color:#101014;mix-blend-mode:multiply}
.stage.on .letter{mix-blend-mode:normal}
.stage.on .colors::after{content:'';position:absolute;inset:0}
.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 on = false;
function apply(){
  stage.classList.toggle('on', on);
  tag.textContent = on ? '녹아웃 — 검정이 깨끗함' : '녹아웃 없음 — 색이 비쳐 탁함';
}
apply();
setInterval(() => { on = !on; apply(); }, 2200);