AWESOME AI MOTION
효과Effects / 도형·패스Shape & Path / Nº 425

윤곽 후 채움Outline Then Fill

Outline Then Fill
윤곽 후 채움
다른 이름Also known as · Trace Fill · 윤곽 뒤 채움 · trace-then-fill · svg-path-draw · outline-to-fill · Border then fill · 윤곽 뒤 채우기 · DrawBorderThenFill
425
도판Fig. 425. 윤곽 후 채움 · Outline Then Fill · power2.out
재생 속도Speed

윤곽선이 먼저 그려진 뒤 내부 면과 색이 채워지는 2단계 등장The outline or wireframe appears first, then the interior surfaces and color fill in.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
구조가 먼저 보이고 내용이 나중에 확정되는 순서를 만든다. 완료와 확정의 느낌이 채움 순간에 실린다Shows structure before content, and lets the fill moment carry a sense of completion.
언제 쓰나Use whenUSE WHEN
  • 아이콘이나 로고를 그린 뒤 색을 입혀 완성할 때
  • 도형 다이어그램에서 뼈대를 먼저 보여 줄 때
  • 계획 단계와 확정 단계를 시각으로 구분할 때
  • Draw an icon or logo, then color it in.
  • Show the skeleton of a shape diagram first.
  • Separate planning from confirmed state visually.
과용 주의AvoidAVOID
  • 채움은 윤곽이 90% 이상 그려진 뒤에 시작한다
  • stroke 폭은 도형 크기에 비례해 1.5~3px로 한다
  • 여러 도형은 80ms 이상 간격을 둔다
분류TagsTAGS
도형·패스Shape & Path설명Explain순서·흐름Sequence설명 영상Explainer video발표Presentation숏폼Short-form난이도 기본Basicsvg
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

아이콘 윤곽이 700ms에 그려지고 이어 400ms에 내부가 색으로 채워지며 stroke 2px은 그대로 남는다

과용 · 나쁜 사례OVERUSE

윤곽과 채움이 동시에 시작해 단계가 구분되지 않거나, 채움 후 윤곽이 사라져 형태가 무뎌진다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
윤곽 시간0.7s0.5~1.0sdashoffset
채움 시간0.4s0.3~0.6sfill-opacity
stroke 폭2px1.5~3px정지 후에도 유지
도형 간격0.12s0.08~0.2s여러 도형일 때
이징power2.outpower1~power3윤곽
GSAP
shapes.forEach((s, i) => {
  const len = s.getTotalLength();
  gsap.set(s, { strokeDasharray: len, strokeDashoffset: len, fillOpacity: 0 });
  tl.to(s, { strokeDashoffset: 0, duration: 0.7, ease: 'power2.out' }, i * 0.12)
    .to(s, { fillOpacity: 1, duration: 0.4, ease: 'power1.inOut' }, 0.65 + i * 0.12);
});
라이브 소스 열기Open live source소스 코드SourceREADME
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <SVG>를 윤곽 후 채움으로 등장시켜 줘. stroke 2px 윤곽을 stroke-dashoffset으로 0.7초 power2.out에 그리고, 0.65초 시점부터 fill-opacity를 0에서 1로 0.4초 동안 올려. 도형이 여러 개면 0.12초 간격으로 시작하고 윤곽은 채워진 뒤에도 남겨. paused 타임라인으로 만들어.

Use GSAP to reveal <SVG> as outline then fill. Draw the 2px stroke with stroke-dashoffset over 0.7 seconds with power2.out, then from 0.65 seconds raise fill-opacity from 0 to 1 over 0.4 seconds. If there are several shapes, offset each by 0.12 seconds, and keep the outline after the fill. One paused timeline.

Codex

<파일>의 SVG 도형에 outline-then-fill을 적용해. 각 경로에 getTotalLength로 dasharray와 dashoffset을 세팅하고 strokeDashoffset 0을 position i*0.12, duration 0.7, ease power2.out으로, fillOpacity 1을 position 0.65+i*0.12, duration 0.4로 건다. 0.35초에는 윤곽만 반쯤, 0.9초에는 채움 시작, 1.6초에는 윤곽과 채움이 모두 남는지 캡처로 확인해.

Apply outline-then-fill to the SVG shapes in <file>. Set dasharray and dashoffset from getTotalLength; tween strokeDashoffset to 0 at position i*0.12, duration 0.7, ease power2.out, and fillOpacity to 1 at position 0.65+i*0.12, duration 0.4. Capture 0.35s (outline half drawn), 0.9s (fill starting) and 1.6s (outline and fill both present).

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
getTotalLength로 경로 길이를 로드 시 계산해 dasharray를 세팅하고 dashoffset과 fillOpacity만 paused 타임라인에서 움직인다
ReelForgeBRIEF TO VIDEO
브리프에 SVG 파일, 윤곽 0.7s, 채움 0.4s, stroke 2px, 채움 색을 싣는다
Scrolline DeckSCROLL SCRUB
진행률 0~0.6에 윤곽, 0.55~1.0에 채움을 매핑하고 되감으면 채움이 먼저 사라진다
06

잘 맞는 조합Pairs well with

선 그리기 · Line Draw
Nº 244선 그리기Line DrawLine Draw
모프 전환 · Morph
Nº 125모프 전환MorphMorph
스태거 · Stagger
Nº 006스태거StaggerStagger
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo