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

#html #css #svg #анимация

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

1. Пример с Goo:



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



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

Ответы

Ответ 1

Фильтры 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. Воздерживайтесь от применения этих фильтров на больших площадях, так как они
достаточно ресурсоёмкие.