Эмуляция метаболла в WEB с чистым CSS

Published in

Дизайн-кабак

2 min readMar 12, 2020

В прошлой статье я рассказал о том, как можно эмулировать метаболл в фигме без плагинов. Забавно, но что дальше? Как перенести это в web?

Если вы не читали статью и не понимаете о чем я пишу, вот она, прочитайте :)

Эмуляция метаболла в Figma

Привет, давайте начнем с того, что такое метаболл. Вначале почитаем что пишут на википедии:

designpub.ru

Вернемся к вебу. Какие технологии у нас есть? Можно, конечно использовать Canvas или WebGL, но это все сложные технологии, которые требуют хороший уровень знаний JS, а мне хочется просто. Остается CSS. И да, в какой-то степени, он позволяет нам сделать метаболл, правда с ограничениями, но о них поговорим в конце.

Простое слияние

Для начала, нам нужны объекты, которые мы будем «сливать». Создадим два div с классом ball:

<div class="ball"></div>
<div class="ball"</div>

Теперь стилизуем их, должно получиться как на картинке.

.ball {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: black;
}

Пока ничего необычного. Теперь давайте добавим фильтр blur, чтобы размыть круги.

.ball {
  ...
  filter: blur(5px);
}

Они начали сливаться (то есть один залезает на другой), но у нас появились размытые края. Чтобы вернуть краям резкость, будем добавлять другой фильтр (из-за которого и появятся ограничения). Но сперва давайте обернем наши круги в еще один div:

<div class="container">
  <div class="ball ball-1"></div>
  <div class="ball ball-2"</div>
</div>

И добавим этому div фильтр contrast, белый фон и ограничение по краям (если их не сделать, то блюр наших кругов будет выходить за границу container):

.container {
  filter: contrast(40);
  background: white;
  overflow: hidden;
}

Получаем нужный нам эффект. Меняя фильтр blur мы можем менять степень «слияния».

Минусы

Так как мы используем контраст, то мы срезаем большую часть цветов, остаются только яркие, очень контрастные цвета (красный, зеленый, синий, черный, белый и т.п.). Но тем не менее, для простых эффектов это более чем достаточно.

Примеры использования

Ниже два примера применения metaball.

Лоадер

Сделав цвета кругов разными, можно получить еще более забавный эффект слияния.

Эффект с мышкой и текстом

Тут всплывает второе ограничение, шрифт при блюре начинает размываться и края становятся скругленными.

P.S. Так же как и в Figma, мы не создаем настоящий метаболл, а создаем его эмуляцию, тем не менее используя этот прием, можно создать большое количество интересных решений, подключайте фантазию.