보케의 원리

<div class="stage">
  <div class="subject"></div>
  <div class="pts" id="pts">
    <i style="left:14%;top:20%;background:#fff6c4"></i>
    <i style="left:30%;top:58%;background:#ffd1e8"></i>
    <i style="left:70%;top:16%;background:#c9d6ff"></i>
    <i style="left:84%;top:52%;background:#c9ffe8"></i>
    <i style="left:58%;top:76%;background:#ffe3c4"></i>
  </div>
  <div class="tag" id="tag">In focus</div>
</div>

.stage{position:absolute;inset:0;background:#0c0c14;overflow:hidden}
.pts{position:absolute;inset:0}
.pts i{position:absolute;width:7%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  opacity:1;transition:width 1.2s ease,filter 1.2s ease,opacity 1.2s ease}
.pts.defocused i{width:22%;filter:blur(4px);opacity:.65}
.subject{position:absolute;left:38%;bottom:0;width:24%;height:62%;border-radius:50% 50% 8% 8%/60% 60% 6% 6%;
  background:#05050a;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.tag{position:absolute;left:7%;bottom:6%;font:700 11px ui-monospace,monospace;color:#e8e8f0;
  background:rgba(255,255,255,.08);padding:3px 9px;border-radius:20px}

const pts=document.getElementById('pts');
const tag=document.getElementById('tag');
function toggle(){
  const on=pts.classList.toggle('defocused');
  tag.textContent=on?'Out of focus':'In focus';
}
setInterval(toggle,1700);