Анимация желе с SVG

#javascript #html #css #svg #svg_animation

Есть такой элемент SVG.








В браузере выглядит так: ссылка

Это часть из этой картинки: 

Как сделать непрерывную желеобразную анимацию? Может посоветуете какую-нибудь библиотеку?
Такая подойдет? — ссылка
    

Ответы

Ответ 1

Для анимации потребуется тег  в SVG:

открываете свое изображение в векторном редакторе и изменяете его формы так, как
вам нужно (главное не создавать больше никаких точек), берете из него форму которая
находится в атрибуте d и вставляете в animate...
Изменить скорость анимации можно с помощью атрибута dur.






Ответ 2

Используем анимации css для создания бесконечного анимированного желе:



@keyframes jello {
  11.1% {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg)
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg)
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
  }
  100% {
    transform: none
  }
}

.jello {
  animation: jello 2s infinite;
  transform-origin: center
}

.center {
  display: inline-block
}

.jello {
  animation: jello 2s infinite;
  transform-origin: center
}

.center {
  display: inline-block
}






Или вот есть маленькая библиотека:
https://github.com/codrops/OrganicShapeAnimations/