Design Atlas
한국어
▶ Motion graphics

Logo reveal

로고 리빌

The short animated moment a brand's logo assembles on screen — usually a combination of stroke-draw, mask reveal, and a light sweep.

Also known as: Logo stingLogo intro
···
html
<div class="stage">
  <svg class="ring" viewBox="0 0 100 100"><circle cx="50" cy="50" r="34"/></svg>
  <div class="word">ATLAS</div>
  <div class="sweep"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:4%}
.ring{width:clamp(48px,20vmin,90px);height:clamp(48px,20vmin,90px)}
.ring circle{fill:none;stroke:var(--accent-3);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:214;stroke-dashoffset:214;transform-origin:50% 50%;transform:rotate(-90deg);
  animation:ring-draw 3.2s ease-in-out infinite}
@keyframes ring-draw{0%{stroke-dashoffset:214}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.word{font:800 clamp(20px,8vmin,48px)/1 sans-serif;color:#fff;letter-spacing:.04em;
  clip-path:inset(0 100% 0 0);animation:word-reveal 3.2s ease-in-out infinite}
@keyframes word-reveal{0%,35%{clip-path:inset(0 100% 0 0)}75%,100%{clip-path:inset(0 0% 0 0)}}
.sweep{position:absolute;top:0;bottom:0;left:-70%;width:18%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sweep-move 3.2s ease-in-out infinite}
@keyframes sweep-move{0%,78%{left:-70%}96%{left:150%}100%{left:150%}}

Usually a 3–5 second clip used as a YouTube channel intro or an ad's closing brand sting. Rather than leaning on one technique, these stack several in sequence: the symbol draws on via Trim Paths, the wordmark reveals from the left through a mask, and a diagonal highlight sweeps across at the very end.

That final sweep of light is really just a white gradient shape set to a Screen or Add blend mode, moving across the logo — but it reads as "polished metal logo" far beyond what the trick actually costs.

Brand guidelines often spell out rules for logo animation specifically — minimum duration, allowed background colors, no rotation or skew — so check those before building one from scratch.

When to use

Don't stack more than two or three techniques. A logo reveal hits harder the shorter it is — more tricks just add noise.