효과Effects / 질감·스타일Texture & Style / Nº 471

해칭 채움Hatch Fill

Hatch Fill

해칭 채움

다른 이름Also known as · Scribble Fill · 스크리블 채움 · Hatched fill construction · 해칭 채움 생성

471

렌더 추가 예정CLIP COMING해칭 채움Hatch Fill정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 471. 해칭 채움 · Hatch Fill · power1.inOut

지그재그 낙서선이 도형 안을 왕복하며 손으로 칠하듯 채워지는 해칭A zigzag scribble travels back and forth inside a shape, filling it as if colored by hand.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

손으로 색칠하는 과정과 친근한 스케치 질감. 완벽하지 않아서 부담 없는 표현The process of coloring by hand and a friendly sketch texture. Imperfect, so approachable.

언제 쓰나Use whenUSE WHEN

도형이나 영역을 손으로 칠하듯 강조할 때
다이어그램에서 선택된 영역을 스케치 스타일로 채울 때

Emphasize a shape or region as if painting it by hand.
Fill a selected area in a diagram in a sketch style.

과용 주의AvoidAVOID

간격 4px 미만 금지(해칭 느낌이 사라짐)
도형 밖으로 나가는 선은 clipPath로 잘라낸다

분류TagsTAGS

질감·스타일Texture & Style 설명Explain 강조Emphasis 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 기본Basicsvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

원 안쪽이 45도 지그재그 선으로 1.2초 동안 위에서 아래로 채워진다. 선 간격 6px, 두께 2px

과용 · 나쁜 사례OVERUSE

간격이 2px 이하로 촘촘해 꽉 찬 면처럼 보이거나, 선이 도형 밖으로 삐져나온다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1.2s	0.8~2s	전체 채움 시간
간격	6px	4~10px	평행선 사이
선 두께	2px	1.5~3px	stroke-width
각도	45deg	30~60	왕복선 기울기
색	#e8590c	고정	잉크색

GSAP

// clipPath로 도형 안만 보이게 하고 지그재그 path를 stroke-dash로 공개
const len = zig.getTotalLength();
gsap.set(zig, { strokeDasharray: len, strokeDashoffset: len });
tl.to(zig, { strokeDashoffset: 0, duration: 1.2, ease: 'power1.inOut' }, 0.2);
// zig: 도형 bbox 위에 45도 왕복 path, spacing 6px, stroke-width 2px, clip-path: 도형

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 도형에 해칭 채움을 넣어줘. 도형 bbox 위에 45도 지그재그 path를 간격 6px, 두께 2px, 색 #e8590c로 그리고 clip-path로 도형 안쪽만 보이게 해. stroke-dashoffset을 전체 길이에서 0으로 1.2초 동안 power1.inOut으로 줄여 위에서 아래로 칠해지게 하고, 0.2초부터 시작해.

Add a hatch fill to the shape in <target>. Draw a 45 degree zigzag path over the shape's bounding box with 6px spacing, 2px stroke, color #e8590c, and clip it to the shape. Reduce stroke-dashoffset from full length to 0 over 1.2 seconds with power1.inOut, starting at 0.2 seconds, so it fills from top to bottom.

Codex

<파일>의 SVG에 도형 path를 <clipPath>로 정의하고 그 안에 45도 지그재그 path(간격 6, stroke-width 2)를 추가해. getTotalLength로 dasharray/dashoffset을 세팅하고 0.2초부터 1.2초 power1.inOut로 dashoffset→0. 0.5초·1.0초·1.6초 캡처로 선이 도형 안에서만 진행하고 밖으로 삐져나오지 않는지 확인해.

In the SVG of <file>, define the shape path as a <clipPath> and add a 45 degree zigzag path (spacing 6, stroke-width 2) inside it. Set dasharray/dashoffset from getTotalLength and tween dashoffset to 0 from 0.2 s for 1.2 s with power1.inOut. Capture at 0.5 s, 1.0 s and 1.6 s to confirm the stroke only advances inside the shape and never spills out.