Живой блоб

Форма органично перетекает — анимация восьмизначного border-radius, чистый CSS.

Просто смотрите.

blob

Код

<div class="blob"></div>

<style>
.blob { width: 300px; aspect-ratio: 1;
  background: linear-gradient(135deg, #E84B16, #f0a06f);
  animation: blob 9s ease-in-out infinite; }
/* морфинг — восьмизначный border-radius */
@keyframes blob {
  0%, 100% { border-radius: 58% 42% 33% 67% / 63% 30% 70% 37%; }
  25%      { border-radius: 35% 65% 60% 40% / 40% 60% 35% 65%; }
  50%      { border-radius: 65% 35% 45% 55% / 55% 45% 60% 40%; }
  75%      { border-radius: 40% 60% 70% 30% / 65% 40% 55% 45%; } }
</style>

Промпт для ИИ

Сделай живой блоб на чистом CSS: квадратный блок с градиентом и анимацией восьмизначного border-radius (формат «a% b% c% d% / e% f% g% h%») через 4 ключевых кадра за 9s ease-in-out infinite — форма органично перетекает. Значения пар должны в сумме давать ~100%, чтобы блоб не худел. Нескольким блобам — разные animation-delay. Подходит для фонов, аватаров, декора.