로토스코핑

<div class="stage">
  <div class="footage"></div>
  <svg class="roto" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <path id="silhouette" d="M40,92 C35,60 37,38 40,20 C42,8 58,8 60,20 C63,38 65,60 60,92 Z"/>
    <path id="line" d=""/>
  </svg>
</div>

.stage{position:absolute;inset:0;overflow:hidden}
.footage{position:absolute;inset:0;background:var(--surface)}
.roto{position:absolute;inset:0;width:100%;height:100%}
#silhouette{fill:var(--line);stroke:none}
#line{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

const line = document.getElementById('line');
const PATH = 'M40,92 C35,60 37,38 40,20 C42,8 58,8 60,20 C63,38 65,60 60,92 Z';
line.setAttribute('d', PATH);
const len = line.getTotalLength();
line.style.strokeDasharray = String(len);
const DUR = 1600, HOLD = 900, GAP = 500;
const start = performance.now();
function loop(now) {
  const t = (now - start) % (DUR + HOLD + GAP);
  let offset;
  if (t < DUR) offset = len * (1 - t / DUR);
  else if (t < DUR + HOLD) offset = 0;
  else offset = len;
  line.style.strokeDashoffset = String(offset);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);