丸を同じグループに置く
別々にフィルターをかけず、つなぎたい丸を1つのグループに入れます。
SVG FILTER / INTERACTIVE UI
SVG Gooey UI Lab.
近づくとつながり、離れると分かれる。SVGフィルターのUIを操作して試せます。
LIVE GOOEY UI
動かして、つながり方を確かめる
PROCESS VIEW
CANVAS
ドラッグ位置を数値で調整
USE IN YOUR PROJECT
設定したUIを持ち帰る
フィルターだけでも、
動くサンプルでも。
SVGのフィルター定義とCSSを使うと、丸い背景を液体のようにつなげられます。アイコン・文字・フォーカス枠は、別のレイヤーに置きます。
現在のUIパターン・配色・フィルター・動きの設定を含む、1枚のHTMLです。開いてそのまま操作できます。
形の加工はSVGフィルター、移動はCSS、クリック・ドラッグ・キーボード操作はJavaScriptです。
CURRENT SETTINGS
背景の丸に適用する、現在のSVGフィルター定義です。
HOW IT WORKS
ぼかしてから、輪郭を作り直す
ぼかしを重ねる
丸の外側へ広がる半透明の部分が、近くの丸と重なります。
アルファ値で輪郭を作る
半透明の部分を薄くし、濃い部分を不透明に近づけると、つながった形になります。
A′ = 22 × A − 9.9Aはぼかした後のアルファ値です。結果は0〜1に収まり、1に近い部分が不透明になります。「しきい値」はA′が0になる境目です。
視覚上つながっても、ボタンの操作領域は別々です。SVGは装飾にし、クリックとフォーカスは通常のHTMLボタンで扱います。OSの「動きを減らす」設定では移動アニメーションを止めます。