서로 가까워진 도형이 끈적하게 이어 붙듯 하나로 합쳐지는 효과. 플로팅 메뉴 버튼이 열리며 방울처럼 뭉치는 연출에 씁니다.
디자인 아틀라스<svg width="0" height="0"><defs><filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" 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>
<div class="goo"><div class="ball x1"></div><div class="ball x2"></div><div class="ball x3"></div></div>.goo{position:relative;width:240px;height:130px;filter:url(#goo)}
.ball{position:absolute;width:56px;height:56px;border-radius:50%;top:37px}
.x1{left:20px;background:var(--accent);animation:m1 4s ease-in-out infinite}
.x2{left:92px;background:var(--accent-2);animation:m2 4s ease-in-out infinite}
.x3{left:164px;background:var(--accent-3);animation:m3 4s ease-in-out infinite}
@keyframes m1{50%{transform:translateX(40px)}}
@keyframes m2{50%{transform:translateY(-18px)}}
@keyframes m3{50%{transform:translateX(-40px)}}도형의 경계를 blur 로 뭉갠 뒤, feColorMatrix 로 알파 채널의 대비를 극단적으로 올려 흐린 회색 경계를 다시 또렷한 알파 경계로 되돌립니다. 이 과정에서 가까운 두 도형의 흐릿한 그림자가 겹친 부분이 하나의 덩어리로 재구성됩니다.
일반 CSS filter 만으로는 이 조합을 만들 수 없어서, feGaussianBlur + feColorMatrix + feComposite 를 담은 SVG 필터를 요소에 filter: url(#goo) 로 직접 적용합니다.
플로팅 액션 버튼(FAB)이 열리며 하위 메뉴가 방울처럼 튀어나올 때, 로딩 인디케이터에 씁니다. 텍스트에는 쓰지 마세요 — 얇은 획이 뭉개집니다.