부울 패스 결합Boolean Path Merge

Boolean Path Merge

부울 패스 결합

다른 이름Also known as · Merge Paths Animation · 패스 병합 애니메이션

415

렌더 추가 예정CLIP COMING부울 패스 결합Boolean Path Merge정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 415. 부울 패스 결합 · Boolean Path Merge · power2.inOut

겹친 도형이 하나로 붙거나 교차 부분이 뚫리며 하나의 실루엣을 만드는 결합Overlapping shapes join, or their intersection is cut out, forming a single silhouette.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

합집합, 차집합, 교집합 같은 집합 관계를 화면의 형태로 이해하게 한다. 두 도형이 어떻게 만나는지 명확하다Makes set relations like union, difference and intersection understandable as forms, showing how two shapes meet.

언제 쓰나Use whenUSE WHEN

벤 다이어그램의 결합과 교차를 설명할 때
두 로고 형태가 합쳐 새 마크가 되는 연출을 할 때
도형 뚫기로 창이나 구멍을 만드는 과정을 보일 때

Explain union and intersection in a Venn diagram.
Two logo shapes combining into a new mark.
Show cutting a window or hole out of a shape.

과용 주의AvoidAVOID

교차 영역은 반드시 다른 색이나 opacity로 구분한다
겹침 거리는 반지름의 1/3~1/2로 한다
연산 종류 라벨을 화면에 함께 둔다

분류TagsTAGS

도형·패스Shape & Path 설명Explain 비교Compare 설명 영상Explainer video 발표Presentation 데이터 스토리Data story 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

두 원이 40px 겹치는 위치까지 800ms에 다가온 뒤 합쳐 한 실루엣이 되고, 교차 영역이 강조색으로 남는다

과용 · 나쁜 사례OVERUSE

겹침이 없어 결합이 일어나지 않거나, 색이 같아 교차 영역이 구분되지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 시간	0.8s	0.5~1.2s	접근
겹침	0→40px	0~반지름의 1/2	교차 폭
연산	합집합	합/차/교/배타	선택
교차 색	#ffcc33	보조색	강조
이징	power2.inOut	power1~power3

GSAP

// SVG mask로 합성: 교집합 = A를 B로 마스크
tl.to('.a', { x: 20, duration: 0.8, ease: 'power2.inOut' }, 0.3)
  .to('.b', { x: -20, duration: 0.8, ease: 'power2.inOut' }, 0.3)
  .to('.inter', { opacity: 1, duration: 0.3 }, 1.0);
// .inter: <circle class=a> 을 <mask id=mb>(원 b)로 마스크한 교차 영역

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP과 SVG mask로 <두 원>의 합집합과 교집합을 보여 줘. 0.3초부터 0.8초 동안 두 원이 서로 20px씩 다가와 40px 겹치게 하고(power2.inOut), 1.0초에 교차 영역을 mask로 만든 노랑 #ffcc33으로 0.3초 페이드 인해. 교차 영역이 다른 색으로 구분되고 paused 타임라인으로 작성해.

Use GSAP and an SVG mask to show the union and intersection of <two circles>. From 0.3 seconds over 0.8 seconds move each circle 20px toward the other with power2.inOut so they overlap by 40px, and at 1.0 seconds fade in the intersection region, made with a mask, in yellow #ffcc33 over 0.3 seconds. The intersection must read as a distinct color. Paused timeline.

Codex

<파일>에 boolean-path-merge를 적용해. .a x 20, .b x -20을 position 0.3, duration 0.8, ease power2.inOut으로 옮기고 .inter(마스크로 만든 교차 영역) opacity 0→1을 position 1.0, duration 0.3으로 건다. 0.3초는 겹침 없음, 1.1초는 교차 영역 등장, 1.8초는 40px 겹침과 교차 영역이 노랑으로 구분되는지 캡처로 확인해.

Apply boolean-path-merge in <file>. Move .a x 20 and .b x -20 at position 0.3, duration 0.8, ease power2.inOut, and tween .inter (mask-built intersection) opacity 0 to 1 at position 1.0, duration 0.3. Capture 0.3s (no overlap), 1.1s (intersection appearing) and 1.8s (40px overlap with the intersection clearly yellow).