ナビ・リスト操作
グーイ・メタボールメニュー
FABを押すと、子ボタンがぷるんと分裂して飛び出すメタボール演出。SVGフィルタ(ぼかし＋コントラスト)で液体のように繋がって見える。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
繋がって見えるのは SVG の #goo フィルタ(feGaussianBlur→feColorMatrix)の効果です。アイテムは単色だと最もきれいに繋がります。背景に重ねる場合はメニュー側だけ filter を当ててください。
コード（コピーして使えます）
<div class="goo-wrap">
<div class="goo-menu" data-open="false">
<button class="goo-item goo-main" aria-label="メニュー">＋</button>
<button class="goo-item goo-child" style="--i:1">★</button>
<button class="goo-item goo-child" style="--i:2">♥</button>
<button class="goo-item goo-child" style="--i:3">✿</button>
</div>
<svg width="0" height="0" aria-hidden="true">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="b" />
<feColorMatrix in="b" mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="g" />
<feBlend in="SourceGraphic" in2="g" />
</filter>
</defs>
</svg>
</div>