Design Atlas
한국어
▶ Motion graphics

Seamless loop

심리스 루프

A clip whose end connects perfectly back to its beginning, so looping it forever never reveals a visible seam.

Also known as: Perfect loop무한 루프
···
html
<div class="stage">
  <svg class="ring" viewBox="0 0 100 100">
    <circle class="track" cx="50" cy="50" r="40"/>
    <circle class="sweep" cx="50" cy="50" r="40"/>
  </svg>
  <span class="pt">loop point</span>
</div>
css
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring{width:min(62%,220px);aspect-ratio:1;transform:rotate(-90deg)}
.track{fill:none;stroke:var(--line);stroke-width:6}
.sweep{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:251;stroke-dashoffset:251;animation:sweep 3s linear infinite}
@keyframes sweep{0%{stroke-dashoffset:251}100%{stroke-dashoffset:0}}
.pt{position:absolute;bottom:8%;font:10px/1 ui-monospace,monospace;color:var(--muted)}

The last frame's values — position, rotation, color — must match the first frame's exactly. One mismatch and the loop visibly jumps on every repeat, a moment the industry just calls the "loop point."

The easiest way is to design the motion as a cycle from the start: a full rotation, or a wave that completes exactly one period, naturally lands back where it began. Motion that doesn't return on its own — a straight pan, say — sometimes gets a light cross-dissolve stitched between the end and the start to hide the seam.

This matters most in short social loops — Boomerangs, GIFs, background videos. The instant a loop is noticeable, viewers register "I've seen this already" and disengage.

When to use

Shorter loops are easier to hide the seam in — a long, meandering loop will show its stitch somewhere.