디자인 아틀라스
EN
↝ 모션

패스 팔로우 텍스트

Path-follow text

텍스트가 직선 기준선이 아니라 SVG로 그린 곡선을 따라 배치되고, 그 곡선 위를 이동하는 효과. 원형 로고 뱃지, 곡선 헤드라인에 흔합니다.

다른 이름: Text on a pathCircular texttextPath animation
···
html
<svg class="ptsvg" viewBox="0 0 200 200">
  <path id="circ" d="M100,20 A80,80 0 1,1 99.9,20" fill="none"/>
  <text font-size="12" font-weight="700" fill="var(--fg)" letter-spacing="2">
    <textPath id="tp" href="#circ" startOffset="0%">✦ DESIGN ATLAS ✦ MOTION ✦ DESIGN ATLAS ✦ MOTION </textPath>
  </text>
  <circle cx="100" cy="100" r="34" fill="var(--accent)"/>
</svg>
css
.ptsvg{width:min(76%,260px);aspect-ratio:1}
js
const tp = document.getElementById('tp');
let off = 0;
function loop() {
  off = (off + 0.05) % 100;
  tp.setAttribute('startOffset', off + '%');
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

SVG의 <textPath> 요소는 <text> 안에 넣으면 그 텍스트의 기준선을 href로 참조한 <path>의 모양대로 휘게 만들어줍니다 — 글자 하나하나를 수동으로 회전·배치할 필요 없이, 브라우저가 경로를 따라 자동으로 문자 간격을 계산해줍니다. 이동 효과는 textPath의 startOffset 속성을 0%에서 100%로(또는 그 이상으로) 계속 늘려가는 것만으로 만들 수 있습니다 — 텍스트 전체가 경로 위를 미끄러지듯 이동합니다.

경로가 닫힌 도형(원)이면 startOffset이 100%를 넘어가는 순간 0%로 자연스럽게 되돌아가 끊김 없이 순환합니다. 이 때문에 원형 뱃지("이 상품은 유기농입니다 ✦ 이 상품은 유기농입니다 ✦ …")처럼 텍스트를 그 자체 길이보다 길게 반복해서 채워두면, 순환할 때 빈 구간 없이 계속 도는 것처럼 보입니다.

모션 패스가 "요소 하나가 경로를 따라 이동"하는 것이라면, 이건 "글자들이 그 경로 자체의 모양이 되어" 이동하는 것이라 같은 곡선이라도 다른 인상을 줍니다. 곡률이 급격한 경로에서는 글자 사이 간격이 눈에 띄게 벌어지거나 겹칠 수 있어, 부드러운 곡선(원, 완만한 웨이브)에 쓰는 것이 안전합니다.

언제 쓰나

원형 로고 뱃지, 도장(스탬프) 느낌의 텍스트, 완만하게 휘어진 헤드라인에 씁니다. 곡률이 급한 경로나 본문처럼 긴 텍스트에는 가독성이 떨어지니 피하세요.