선 그리기Line Draw

Line Draw

선 그리기

다른 이름Also known as · 경로 드로잉 · Stroke reveal · Checkmark Tick · 성공 체크 그리기 · checkmark-success-tick · Animated Check Mark · 체크 표시 그리기 · Path tracing / Draw-on

244

도판Fig. 244. 선 그리기 · Line Draw · none

재생 속도Speed

선의 시작부터 끝까지 경로를 순서대로 드러내는 표현An animation that progressively reveals a path from start to finish.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

시간에 따른 값의 변화와 진행 방향Shows how values change over time and the direction of progression.

언제 쓰나Use whenUSE WHEN

시간에 따른 값의 변화와 진행 방향를 보여줄 때
시간 순서의 꺾은선을 그리고 점으로 현재 진행 위치를 보여준다와 같은 장면을 만들 때

When showing changes in value over time and the direction of progression
When drawing a chronological line chart with a dot marking the current position

과용 주의AvoidAVOID

최종 상태를 0.5초 이상 유지한다
동일 화면에서 불필요한 주홍 강조를 추가하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

시간 순서의 꺾은선을 그리고 점으로 현재 진행 위치를 보여준다

과용 · 나쁜 사례OVERUSE

범주형 자료를 연속된 선으로 연결해 추세처럼 보이게 한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
선 길이 정규화	1	1	pathLength로 dash 단위 고정
지속	1.85s	1.2~2.2s	좌측부터 연속 진행
점 반지름	8px	5~10px	현재 선 끝 표시
출발	0.30s	0.2~0.4s	빈 경로 준비 상태

GSAP

const path=document.querySelector('#graph'), tip=document.querySelector('#tip');
const length=path.getTotalLength(), progress={value:0};
gsap.set(path,{strokeDasharray:1,strokeDashoffset:1});
const start=path.getPointAtLength(0);gsap.set(tip,{x:start.x,y:start.y});
tl.to(path,{strokeDashoffset:0,autoRound:false,duration:1.85,ease:'none'},.3);
tl.to(progress,{value:1,duration:1.85,ease:'none',onUpdate:()=>{const p=path.getPointAtLength(progress.value*length);gsap.set(tip,{x:p.x,y:p.y});}},.3);

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

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 선 그리기 효과를 적용해. 시간 순서의 꺾은선을 그리고 점으로 현재 진행 위치를 보여준다. 선 길이 정규화 1; 지속 1.85s; 점 반지름 8px; 출발 0.30s로 만들고 이징은 none를 써. GSAP 타임라인 하나로 제어하고 2.5초부터 3초까지 완성 상태를 유지해.

Apply Line Draw to <target>. Draw a chronological line chart and use a dot to mark the current drawing position. Use these settings: normalized path length 1; duration 1.85s; dot radius 8px; start 0.30s; ease none. Control everything with a single GSAP timeline and hold the completed state from 2.5 to 3 seconds.

Codex

<파일>의 데이터 장면에 선 그리기 효과를 구현해. 선 길이 정규화 1; 지속 1.85s; 점 반지름 8px; 출발 0.30s를 적용하고 이징은 none로 지정해. 0초, 0.75초, 1.75초, 2.9초를 캡처해서 시작 상태와 진행 변화, 최종 상태의 잘림과 겹침을 확인해. Math.random과 타이머 없이 타임라인으로 재생하고 마지막 0.5초 이상 정지해.

Implement Line Draw in the data scene in <file>. Use these settings: normalized path length 1; duration 1.85s; dot radius 8px; start 0.30s; ease none. Capture at 0, 0.75, 1.75, and 2.9 seconds to check the initial state, progression, and any clipping or overlap in the final state. Play using a timeline without Math.random or timers, and hold still for at least the final 0.5 seconds.