얕은 심도

<div class="stage">
  <div class="bg">
    <i class="dot d1"></i><i class="dot d2"></i><i class="dot d3"></i><i class="dot d4"></i><i class="dot d5"></i>
  </div>
  <div class="subject"></div>
  <div class="fg"></div>
  <div class="hud">
    <svg viewBox="0 0 60 60" width="30" height="30">
      <circle cx="30" cy="30" r="26" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="2"/>
      <g id="hex"><polygon points="30,8 48,19 48,41 30,52 12,41 12,19" fill="#0a0a0a"/></g>
    </svg>
    <span class="fstop" id="fstop">f/1.4</span>
  </div>
</div>

.stage{position:absolute;inset:0;background:linear-gradient(180deg,#8fc7e8,#dff0e0 70%)}
.bg{position:absolute;inset:0;transition:filter 1.1s ease}
.bg .dot{position:absolute;border-radius:50%}
.d1{width:15%;aspect-ratio:1;left:8%;top:18%;background:radial-gradient(circle at 35% 35%,#fff6c8,#ffd23f 70%)}
.d2{width:9%;aspect-ratio:1;left:24%;top:44%;background:radial-gradient(circle at 35% 35%,#ffffff,#a9d6ff 70%)}
.d3{width:20%;aspect-ratio:1;left:66%;top:12%;background:radial-gradient(circle at 35% 35%,#ffe6c8,#ff9a5b 70%)}
.d4{width:11%;aspect-ratio:1;left:80%;top:46%;background:radial-gradient(circle at 35% 35%,#ffffff,#8fe0c8 70%)}
.d5{width:60%;height:22%;left:0;bottom:0;background:linear-gradient(180deg,#79b06a,#4f8a49)}
.subject{position:absolute;left:38%;top:30%;width:26%;height:46%;border-radius:46% 46% 40% 40%/50% 50% 38% 38%;
  background:linear-gradient(160deg,#3a3f55,#20232f);box-shadow:0 10px 16px rgba(0,0,0,.25)}
.fg{position:absolute;left:-6%;bottom:-8%;width:46%;height:34%;border-radius:50% 40% 60% 30%;
  background:#2e5c34;opacity:.85;transition:filter 1.1s ease}
.hud{position:absolute;right:5%;top:5%;display:flex;flex-direction:column;align-items:center;gap:2px}
#hex{transition:transform 1.1s ease;transform-origin:30px 30px}
.fstop{font:700 11px ui-monospace,monospace;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

const stops=[1.4,2.8,5.6,11,16];
const bg=document.querySelector('.bg');
const fg=document.querySelector('.fg');
const hex=document.getElementById('hex');
const label=document.getElementById('fstop');
let i=0;
function step(){
  const f=stops[i];
  const openness=1-(Math.log(f/1.4)/Math.log(16/1.4))*0.78;
  hex.style.transform='scale('+openness.toFixed(2)+')';
  const blurAmt=openness*9;
  bg.style.filter='blur('+blurAmt.toFixed(1)+'px)';
  fg.style.filter='blur('+(blurAmt*0.8).toFixed(1)+'px)';
  label.textContent='f/'+f;
  i=(i+1)%stops.length;
}
step();
setInterval(step,1500);