<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 871 1150">
  <defs>
    <filter id="turbulence" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.002 0.002" numOctaves="1" seed="1" stitchTiles="stitch" result="turbulence">
        <animate id="noiseAnimate" attributeName="seed" from="0" to="100" dur="20s" repeatCount="indefinite"></animate>
      </feTurbulence>

      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="100" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />
    </filter>
  </defs>
  <path filter="url(#turbulence)" d="M815 1104c-105 64-340 40-437 40-82 0-331 32-360-55-45-135 11-297 11-437 0-151-55-361-8-503 13-39 79-111 117-120 185-41 472-56 611 83 173 172 128 861 66 992z" />
</svg>
$color-peach: #ffdbcf; // Peach
$color-lavender: #f0d2ff; // Lavender
$color-sky: #d8edff; // Sky
$color-pistachio: #cff5cf; // Pistachio

svg {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: backdrop 5s linear infinite;
}

@keyframes backdrop {
  0% {
    fill: $color-peach;
  }
  20% {
    fill: $color-lavender;
  }
  50% {
    fill: $color-sky;
  }
  75% {
    fill: $color-pistachio;
  }
  100% {
    fill: $color-peach;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.