밑줄 드로우Underline Draw

Underline Draw

밑줄 드로우

다른 이름Also known as · 밑줄 그리기 · Stroke reveal · Underline stroke draw · Animated Underline Draw · 텍스트 밑줄 그리기 · Underline draw · 마커 밑줄 그리기 · underline-emphasis-sweep

094

도판Fig. 094. 밑줄 드로우 · Underline Draw · none

재생 속도Speed

핵심어 아래의 SVG 경로를 왼쪽부터 한 획으로 그리는 효과An SVG path draws beneath a key phrase from left to right in a single stroke.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

읽어야 할 단어를 손으로 짚듯 강조한다Emphasizes the words to read as if pointing to them by hand.

언제 쓰나Use whenUSE WHEN

핵심어를 한 번 짚을 때
문장에 필기하는 듯한 강조를 넣을 때

Call attention to a key phrase once.
Add a handwritten emphasis to a sentence.

과용 주의AvoidAVOID

글자 획에 밑줄을 겹치지 않는다
dashoffset을 정수로 반올림하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

다음 말 아래의 조금 휜 주홍 선을 1.35초에 걸쳐 그린다

과용 · 나쁜 사례OVERUSE

밑줄 전체를 갑자기 켜서 그리는 방향이 보이지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1.35s	0.7~1.5s	부분 획이 보이는 속도
선 두께	6px	3~8px	84px 제목 기준
정규화 길이	1	1	pathLength와 dasharray를 1로 맞춘다
시작	0.3s	0.2~0.5s	단어를 먼저 읽는다

GSAP

const tl = Motion.timeline();
tl.fromTo('.underline path', {strokeDashoffset:1}, {strokeDashoffset:0, autoRound:false, duration:1.35, ease:'none'}, 0.3);
tl.to('.lead', {opacity:1, duration:0.25}, 1.85);
Motion.ready();

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>의 다음 말 아래에 주홍 SVG 밑줄을 한 획으로 그려줘. pathLength 1, stroke-dasharray 1, 두께 6px, 둥근 끝과 약간 휜 경로를 사용해. 0.3초부터 strokeDashoffset 1에서 0으로 1.35초 동안 ease none, autoRound false로 움직이고 3초까지 완성 상태를 유지해.

Draw a vermilion SVG underline beneath "next word" in <target> in a single stroke. Use pathLength 1, stroke-dasharray 1, a 6px stroke, rounded caps, and a slightly curved path. Starting at 0.3 seconds, animate strokeDashoffset from 1 to 0 over 1.35 seconds with ease none and autoRound false. Hold the completed state until 3 seconds.

Codex

<파일>의 핵심어 span 아래에 viewBox 0 0 270 32의 SVG 경로 M 5 20 C 72 11 172 13 264 17을 배치해. pathLength와 dasharray는 1이고 0.3초부터 dashoffset 1에서 0으로 duration 1.35초, ease none, autoRound false를 적용해. 0.23초, 0.73초, 1.23초, 2.9초 캡처로 선 없음, 부분 획, 길이 증가, 완성 홀드를 확인해.

Place an SVG path with viewBox 0 0 270 32 and path M 5 20 C 72 11 172 13 264 17 beneath the key phrase span in <file>. Set pathLength and dasharray to 1. Starting at 0.3 seconds, animate dashoffset from 1 to 0 with duration 1.35 seconds, ease none, and autoRound false. Capture at 0.23, 0.73, 1.23, and 2.9 seconds to check no line, a partial stroke, increasing length, and the completed hold.