효과Effects / UI 시연UI Demo / Nº 357

벡터 펜 시연Vector Pen Demo

Vector Pen Demo

벡터 펜 시연

다른 이름Also known as · Vector pen demo

357

렌더 추가 예정CLIP COMING벡터 펜 시연Vector Pen Demo정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 357. 벡터 펜 시연 · Vector Pen Demo · none

점이 찍히고 곡선과 핸들이 차례로 나타나 선택 상자가 완성된다.Anchors, a Bézier curve, handles, and a selection frame appear in sequence.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

곡선을 설계하는 도구와 조작 원리를 보여준다.Explains how vector drawing tools construct a curve.

언제 쓰나Use whenUSE WHEN

벡터 편집기 기능을 소개할 때
베지어 곡선의 제어점을 설명할 때

Introduce a vector editor.
Explain Bézier control points.

과용 주의AvoidAVOID

SVG 좌표계와 커서 좌표계를 혼용하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

500ms 간격으로 앵커가 찍히고 곡선과 핸들, 선택 상자가 순서대로 나온다

과용 · 나쁜 사례OVERUSE

핸들이 곡선과 연결되지 않아 제어 관계를 알 수 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
점 간격	500ms	350~800ms	앵커 3개
선 공개	700ms	500~1000ms	경로 전체
핸들 공개	250ms	180~400ms	제어 관계
앵커 지름	12px	8~16px	1920x1080 기준

GSAP

const path = document.querySelector('.curve');
const length = path.getTotalLength();
gsap.set(path,{strokeDasharray:length,strokeDashoffset:length});
tl.fromTo('.anchor',{opacity:0},{opacity:1,duration:0.1,stagger:0.5},0);
tl.to(path,{strokeDashoffset:0,duration:0.7,ease:'none'},1.1);
tl.fromTo('.handle',{opacity:0},{opacity:1,duration:0.25},1.8);
tl.fromTo('.selection',{opacity:0},{opacity:1,duration:0.2},2.05);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 벡터 펜 시연을 적용한다. SVG 앵커 3개를 500ms 간격으로 공개한 뒤 선 700ms, 핸들 250ms, 선택 상자 200ms를 차례로 보여준다. 초기 상태를 명시한 paused 타임라인으로 만들고 고정 좌표와 시간만 사용해 seek를 재현한다.

Apply Vector Pen Demo to <target> in <file>. Reveal three SVG anchors at 500ms intervals, then draw the curve over 700ms, reveal handles over 250ms, and reveal the selection frame over 200ms. Define the initial state and use a paused timeline with fixed coordinates and timings for repeatable seeking.

Codex

<파일>에서 <대상>의 벡터 펜 시연 장면에 적용한다. SVG 앵커 3개를 500ms 간격으로 공개한 뒤 선 700ms, 핸들 250ms, 선택 상자 200ms를 차례로 보여준다. 0.56초·1.46초·2.45초 시점을 캡처해 시작 상태, 중간 관계, 최종 정착과 겹침 여부를 확인한다.

Implement Vector Pen Demo in the scene for <target> in <file>. Reveal three SVG anchors at 500ms intervals, then draw the curve over 700ms, reveal handles over 250ms, and reveal the selection frame over 200ms. Capture at 0.56s, 1.46s, 2.45s to verify the initial state, intermediate relationships, final settling, and unwanted overlap.