液体と有機 · 水のように
メタボール融球
- 粘性
- 有機的
- つながる
球の周りを小さな衛星が回り、近づくと間に橋が伸び、離れると切れます。接触ではなく、雫のように融合します。だからいくつかの円ではなく、表面張力を持ったものに見えます。
使いどころ
「統合されている・数えている」短い過程に向きます。カートへの追加、機器の接続、ダウンロードの進捗などです。何かが動いている間だけ成立するので、静止したアイコンにはしないでください。1 ページに 1 か所だけにしてください。メタボールは目を引くので、2 つ出ると飾りになります。
パラメータ
goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
レシピ
メタボール → goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
AI に渡す一文
融合する球を作ってください。56px のコアは動かさず、30px の衛星 3 つがその周りを回ります。軌道半径は 42px と 82px の間で往復し（42px ではコアに接して橋が伸び、82px では完全に離れます）、3 つの角速度はそれぞれ変えます。融合は SVG フィルタ 1 つで行います。feGaussianBlur σ=9 で縁をぼかし、feColorMatrix でアルファを 20 倍して 9 を引くことで、ぼけた縁を硬い縁に切り直します。コアはフィルタ層の中で 1 回だけ描き、フィルタの外側にはアイコンとラベルだけを置きます。両方の層で同じ円を描くと半ピクセルずれ、重なった 2 つの円に見えます。