효과Effects / 도형·패스Shape & Path / Nº 440

패스 위 텍스트Text On Path

Text On Path

패스 위 텍스트

다른 이름Also known as · Animated Text Path Shape · 텍스트 경로 형태 변형

440

렌더 추가 예정CLIP COMING패스 위 텍스트Text On Path정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 440. 패스 위 텍스트 · Text On Path · none

글자가 곡선 경로를 따라 배열되고 그 위를 이동하는 효과Characters sit along a curved path and travel over it.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

곡선의 흐름과 공간감을 문장 자체로 보여준다. 경로가 시선을 끝점으로 안내한다Shows the flow of a curve through the sentence itself, with the path guiding the eye to its end point.

언제 쓰나Use whenUSE WHEN

지도나 궤적을 따라 이동하는 설명 문구가 필요할 때
곡선 로고형 타이틀을 흘려 보낼 때

Move a caption along a route or trajectory on a map.
Flow a title along a curved logo-like line.

과용 주의AvoidAVOID

곡률 반경이 글자 크기의 2배 미만인 경로 금지
글자가 뒤집히는 구간 금지
작은 본문에는 쓰지 않는다(28px 미만)

분류TagsTAGS

도형·패스Shape & Path 순서·흐름Sequence 분위기Mood 설명 영상Explainer video 숏폼Short-form 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

'FROM SEOUL TO BUSAN'이 완만한 S곡선을 따라 2초 동안 offset 0에서 100%로 흘러 들어온다

과용 · 나쁜 사례OVERUSE

급한 곡률에서 글자가 겹치고 뒤집혀 읽히지 않는다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 시간	2s	1.2~3s	offset 0→100%
글자 크기	56px	40~96px	경로 대비 충분히 작게
경로 곡률 반경	글자 크기의 4배 이상	3~8배	겹침 방지
이징	none	none~sine.inOut	선형이 궤적 느낌

GSAP

/* <path id="p" d="M100 700 C500 300 1000 1000 1800 400"/><text><textPath href="#p" id="tp">FROM SEOUL TO BUSAN</textPath></text> */
tl.fromTo('#tp', { attr: { startOffset: '-60%' } },
  { attr: { startOffset: '5%' }, duration: 2, ease: 'none' }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 SVG 곡선 경로(완만한 S자)를 만들고, 문구 '<문구>'를 textPath로 올려 2초 동안 startOffset이 -60%에서 5%로 흘러 들어오게 해줘. 글자 크기 56px, 이징 none, 도착 뒤 1.5초 정지. 경로 곡률 반경은 글자 크기의 4배 이상으로 잡고 paused 타임라인 하나로 만들어.

In <target> draw a gentle S-shaped SVG path and place '<text>' on it as a textPath so startOffset runs from -60% to 5% over 2 seconds. Font size 56px, ease none, hold 1.5 seconds after arrival. Keep the curve radius at least 4 times the font size and use one paused timeline.

Codex

<파일>에서 textPath의 startOffset을 attr tween(-60%→5%, 2s, none)으로 구동해. 0.5초, 1.2초, 2.5초 시점을 캡처해 글자가 겹치거나 뒤집히지 않는지, 2.5초에 문장 전체가 경로 안에 들어와 있는지 확인해.

In <file> drive the textPath startOffset with an attr tween (-60% to 5%, 2s, none). Capture at 0.5s, 1.2s and 2.5s and verify letters never overlap or flip and that the whole sentence sits inside the path at 2.5s.