Не уверен, как корректнее перевести Blob. Капля, пятно, клякса? Пусть будет блоб.
Хуан Диего Родригез делится тремя способами сделать блобы на CSS.
1. С использованием
border-radius. На всякий случай напомню, что в это свойство можно передать аж 8 значений для разных осей, таким образом можно создать что-то похожее на пятно. Но оно всегда будет выпуклое, впуклости таким образом не нарисовать.2. SVG-фильтры. Популярный рецепт: рисуете фигуры любым способом, добавляете размытие по Гауссу и фильтр контрастности. Размытие уберёт чёткие границы, а контрастность придаст блобу форму.
3. Новая функция
shape(). Тут всё просто: как нарисуете, так и будет выглядеть.Мне пока больше всего нравится способ №2 для анимаций, когда на фоне капли сливаются и перемещаются. Но устройства от таких анимаций начинают греться. А способ №3 пока не везде работает, нужно ждать Baseline Widely Available, чтобы не бояться.
https://css-tricks.com/css-blob-recipes/
