Design Atlas
한국어
▶ Motion graphics

Rotoscoping

로토스코핑

Tracing or extracting the outline of live-action footage frame by frame — either to draw an animation over it or to cut a subject away from its background.

Also known as: Roto로토 작업
···
html
<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>
css
.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}
js
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);

The technique traces back to the rotoscope device Max Fleischer invented in 1915: filmed footage was projected one frame at a time onto a glass plate, and an animator traced a person's exact motion onto paper laid over it. Disney's Snow White got its unusually lifelike human movement this way.

In modern VFX and compositing, "roto" has broadened — it's no longer about drawing, but about tracing a person's or object's outline frame by frame to cut them away from the background as a mask. Footage shot without a green screen still needs this hand work whenever a subject has to be pulled out cleanly — for a composite ad, or to place someone in front of on-screen text.

AI-assisted auto-roto tools (like Runway) exist now, but tricky edges — flyaway hair, the boundary of something transparent — still often get corrected by hand, frame by frame.

When to use

Roto has a well-earned reputation as one of the most tedious, time-consuming jobs in the industry — if you can shoot on green screen instead, avoid it from the start.