Меню с SVG фильтрами (Goo effect)

Есть меню, которое реализовано на HTML/CSS. Мне пришла идея сделать его совместно с SVGфильтрами, а конкретно с эффектом "вязкости" (Goo) для каждого элемента меню.
1. Пример с Goo

2. Меню, которое нужно сделать с таким эффектом:

Вопрос: Как правильно применить фильтры для этого меню?

Ответ

Фильтры SVG - это довольно огромная тема. Одни из самых широко применяемых - , который присутствует также в CSS ( filter: blur(N) ), , , , , и так далее.
В данном случае мы будем применять , и
Первый шаг:
Возьмём для начала "каркас":
$(".goo-button").on("click", function() { $(".goo-button").toggleClass("active"); $(".goo-button span").toggleClass("active"); $(".circle").toggleClass("goo-active"); }); * { margin: 0; padding: 0; } a { font-size: 1.5em; color: #fff; } .wrapper { position: relative; margin: 15px; } .goo-button { position: relative; background-color: #0066ff; width: 80px; height: 80px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); transition: ease-out 200ms; } .goo-button.active { transform: scale(0.8); } .goo-menu span { position: absolute; display: block; width: 40px; height: 4px; background-color: #ffffff; margin: 4px; transition: all 0.5s; } .goo-menu span:first-child { top: 26px; left: 15px; } .goo-menu span:nth-child(2) { top: 36px; left: 15px; } .goo-menu span:nth-child(3) { top: 46px; left: 15px; } .goo-menu span.active:first-child { top: 36px; transform: rotate(45deg); } .goo-menu span.active:nth-child(2) { opacity: 0; transition: opacity 0.3s; } .goo-menu span.active:nth-child(3) { top: 36px; transform: rotate(-45deg); } .circle { display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; background: #0066ff; border-radius: 50%; position: absolute; top: 8px; left: 8px; z-index: -1; transition: ease-out 200ms; cursor: pointer; } .c1.goo-active { top: 105px; left: 20px; transition-delay: 0.1s; } .c2.goo-active { top: 20px; left: 105px; transition-delay: 0.3s; } .c3.goo-active { top: 80px; left: 80px; transition-delay: 0.2s; }

Второй шаг:
Теперь нам нужно использовать сами фильтры, но перво-наперво немного теории.
SVG фильтры модифицируют графические объекты. Каждый элемент фильтра содержит в себе набор примитивов фильтров, которые выполняют определённую графическую операцию. Мы можем использовать результат операции как входной сигнал для другого фильтра, создавая ограниченный охват возможностей для эффектов. Самый обычный пример с использованием фильтра

Фильтры для HTML-элементов подключаются таким образом:
.elem{ -webkit-filter: url("#filter"); filter: url("#filter"); }
Третий шаг:
После того, как мы разобрались, можно приступать к созданию эффекта "вязкости (или липкости).
В последнем фрагменте кода мы использовали 3 операции:
для создания размытия для увеличения контрастности альфа-канала для видимости содержимого
$(".goo-button").on("click", function() { $(".goo-button").toggleClass("active"); $(".goo-button span").toggleClass("active"); $(".circle").toggleClass("goo-active"); }); * { margin: 0; padding: 0; } a { font-size: 1.5em; color: #fff; } .wrapper { position: relative; margin: 15px; } /*Подключаем наши фильтры*/ .goo-menu { -webkit-filter: url(#gooEffect"); filter: url("#gooEffect"); } .goo-button { position: relative; background-color: #0066ff; width: 80px; height: 80px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); } .goo-button.active { transform: scale(0.8); } .goo-menu span { position: absolute; display: block; width: 40px; height: 4px; background-color: #ffffff; margin: 4px; transition: all 400ms; } .goo-menu span:first-child { top: 26px; left: 15px; } .goo-menu span:nth-child(2) { top: 36px; left: 15px; } .goo-menu span:nth-child(3) { top: 46px; left: 15px; } .goo-menu span.active:first-child { top: 36px; transform: rotate(45deg); } .goo-menu span.active:nth-child(2) { opacity: 0; transition: opacity 300ms; } .goo-menu span.active:nth-child(3) { top: 36px; transform: rotate(-45deg); } .circle { display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; background: #0066ff; border-radius: 50%; position: absolute; top: 8px; left: 8px; z-index: -1; transition: ease-out 200ms; cursor: pointer; } .c1.goo-active { top: 105px; left: 20px; transition-delay: 100ms; } .c2.goo-active { top: 20px; left: 105px; transition-delay: 300ms; } .c3.goo-active { top: 80px; left: 80px; transition-delay: 200ms; }

P.S. Воздерживайтесь от применения этих фильтров на больших площадях, так как они достаточно ресурсоёмкие.