들어가며

한번 구현해 보고 싶었던 효과가 있었는데, 어떻게 검색해야지 해당 효과를 볼 수 있는 알 수가 없어서 별의별 검색어로 다 검색을 해보다가 이번에 찾게 된 gooey 효과.  
svg effect로 제가 상상했던 모습을 그대로 그려주었습니다.  

 

CSS로 구현

이 효과를 말로 설명하자면 두 도형이 끈적하게 연결되는 형태라고 해야 할까?
꿀이 떨어질 때 끈적하게 떨어지는 느낌이랄까?

위와 같은 효과를 구현하고 싶었습니다.

위 예제 효과는 css 상에서 filter: blur(20px) contrast(30) 를 사용해서 만들었습니다.
한 가지 주의할 점은 도형에 효과를 주는 게 아니라 도형들 상위 요소에 해당 효과가 들어가야 한다는 것입니다.

css로도 이 효과를 구현할 수는 있었으나, 배경색이 반드시 필요하고 흑백 외의 색상을 표현하는 데는 어려움이 있어 실무에서 쓰기엔 어려움이 있어 보였습니다.

그래서 찾게된 svg filter

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
		<filter id="gooey">
			<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
			<feComposite in="SourceGraphic" in2="goo" operator="atop" />
		</filter>
	</defs>
</svg>

 

SVG Filter로 구현

해당 필터에 적용된 속성은 다음과 같이 정의할 수 있습니다.

- feGaussianBlur

<feGaussianBlur in="효과 적용 대상" stdDeviation="블러 수치" result="결과를 변수에 저장" />

    in: 효과를 적용할 대상 지정  `SourceGraphic`로 지정 시 원본에 효과가 적용됨
    stdDeviation: 블러 수치를 지정
    result: 해당 필터 효과의 결과를 변수에 저장 

- feColorMatrix

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />

    mode: 모드를 matrix로 하면, 컬러 매트릭스를 적용할 수 있음.
    - 컬러 매트릭스의 경우 값은 빨간색, 녹색, 파란색, 알파값을 설정하는 데 사용

- feComposite

<feComposite in="SourceGraphic" in2="goo" operator="atop" />

operator: over, in, atop, out, xor 옵션

 

 

마치며

해당 효과를 잘 활용하면 네이티브 앱에서 많이 사용되는 바텀 메뉴의 인터렉션을 웹에서도 손쉽게 구현 가능해 보입니다. 그리고 mouse move 이벤트과 연결해서 사용하면 좀 더 재미있는 효과들을 만들 수도 있어 다양하게 활용 할 수 있지 않을까 합니다.

 

참고문서 

• css-tricks - gooey-effect