HTML 그래픽 – feOffset

SVG 드롭 섀도우 고급 기법

<feOffset> + <feBlend> 조합

이 필터 조합은 계층적 그림자 효과를 생성하기 위해 사용된다.
원본 그래픽 → 오프셋 처리 → 블렌딩의 3단계 프로세스로 작동한다.

오프셋과 블렌딩을 이용한 기본 그림자

<filter id="f1" width="120" height="120">

  <feOffset in="SourceGraphic" dx="20" dy="20" />

  <feBlend in="SourceGraphic" in2="offOut" />

</filter>

흐림 효과 추가

<feGaussianBlur>를 이용한 부드러운 그림자

<filter id="f2">

  <feOffset in="SourceGraphic" dx="20" dy="20"/>

  <feGaussianBlur stdDeviation="10"/>

  <feBlend in="SourceGraphic" in2="blurOut"/>

</filter>

알파 채널 활용

검정색 그림자 생성 기법

컬러 매트릭스 적용

<feColorMatrix>를 이용한 색상 변형

💡 고급 기법 팁:
• 필터 체인 순서 변경으로 다양한 효과 구현
• 매트릭스 값 조정 → 색상/명암 비율 변경
• 다중 feColorMatrix 조합 → 복합 색상 효과
• SourceGraphic vs SourceAlpha: 투명도 처리 차이