테이퍼 스트로크Tapered Stroke

Tapered Stroke

테이퍼 스트로크

436

렌더 추가 예정CLIP COMING테이퍼 스트로크Tapered Stroke정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 436. 테이퍼 스트로크 · Tapered Stroke · power2.out

선의 시작과 끝이 가늘어지며 붓처럼 길어졌다 줄어드는 가변 폭 스트로크A line's start and end thin out like a brush stroke as it lengthens and shortens.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

방향성과 속도감을 만든다. 균일한 선보다 손으로 그린 붓 획의 활력이 있다Builds direction and speed, and gives a hand-drawn stroke more life than a uniform line.

언제 쓰나Use whenUSE WHEN

서명, 밑줄, 화살표를 붓 느낌으로 그릴 때
속도감이 필요한 궤적 표시를 만들 때
로고 주변 획 장식을 그릴 때

Draw signatures, underlines or arrows with a brush feel.
Trajectories that need a sense of speed.
Stroke decoration around a logo.

과용 주의AvoidAVOID

폭 변화는 sin 곡선처럼 부드럽게 한다
최대 폭은 선 길이의 3% 이하로 한다
끝 폭은 0으로 수렴시킨다

분류TagsTAGS

도형·패스Shape & Path 강조Emphasis 분위기Mood 설명 영상Explainer video 숏폼Short-form 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

선이 900ms에 그려지며 중간 최대 폭 12px, 양끝 0px로 가늘어지고 마지막에 꼬리부터 줄어 사라진다

과용 · 나쁜 사례OVERUSE

폭이 균일해 일반 선과 구분이 안 되거나, 폭 변화가 급해 획이 뚝뚝 끊겨 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
그리기 시간	0.9s	0.6~1.4s	길이 전개
최대 폭	12px	6~18px	중앙
끝 폭	0px	0~2px	양끝
사라짐	0.4s	0.3~0.6s	꼬리부터
이징	power2.out	power1~power3

GSAP

// 폭 프로파일 w(u)=W*sin(pi*u)로 만든 면(fill path)을 진행률 p 구간만큼 그림
const o = { p: 0 };
tl.to(o, { p: 1, duration: 0.9, ease: 'power2.out', onUpdate: () => el.setAttribute('d', ribbon(pts, 0, o.p, 12)) }, 0.3);
tl.to(o, { p: 1, duration: 0.4, ease: 'power2.in', onUpdate: () => el.setAttribute('d', ribbon(pts, o.q, 1, 12)) }, 1.6); // q 0→1 꼬리

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP과 SVG로 <곡선>에 테이퍼 스트로크를 그려 줘. 경로 샘플 점에서 폭 프로파일 W*sin(pi*u), 최대 12px, 양끝 0px인 면 경로를 만들고, 0.3초부터 0.9초 동안 power2.out으로 진행률 0→1까지 그려. 1.6초부터 0.4초 동안 꼬리부터 지워 사라지게 해. 폭 변화는 부드럽게 하고 paused 타임라인으로 작성해.

Use GSAP and SVG to draw a tapered stroke along <curve>. Build a filled path from sampled points with width profile W*sin(pi*u), max 12px and 0px at both ends, and draw it from progress 0 to 1 starting at 0.3 seconds over 0.9 seconds with power2.out. From 1.6 seconds erase it tail first over 0.4 seconds. Smooth width change, paused timeline.

Codex

<파일>의 곡선에 tapered-stroke를 적용해. ribbon(pts, start, end, W)로 sin 폭 프로파일 면을 만들고, 진행률 p를 position 0.3, duration 0.9, ease power2.out으로 0→1, 꼬리 q를 position 1.6, duration 0.4로 0→1 tween해 setAttribute('d', ...). 0.6초는 반쯤 그려짐, 1.3초는 완성, 2.1초는 사라졌는지, 양끝 폭이 0인지 캡처로 확인해.

Apply tapered-stroke to the curve in <file>. Build the sin-profile ribbon with ribbon(pts, start, end, W), tween progress p 0 to 1 at position 0.3, duration 0.9, ease power2.out and tail q 0 to 1 at position 1.6, duration 0.4, calling setAttribute('d', ...). Capture 0.6s (half drawn), 1.3s (complete), 2.1s (gone) and confirm both end widths are 0.