<main>
  <div class="blob">

    <svg width="600" height="600" viewBox="0 0 600 600">
      <path>
        <animate attributeName="d" dur="8s" repeatCount="indefinite"
          values="M431.3 121.9c22 40.1 11.3 97.5 13.3 146.9 2 49.5 16.6 91.1 4.3 121.8-12.2 30.6-51.3 50.4-88.5 55.1-37.1 4.7-72.4-5.7-108.8-17.1-36.5-11.3-74.1-23.7-104-52-29.9-28.2-52-72.4-48.4-115.4 3.5-43 32.7-84.8 70.5-122.2 37.7-37.3 84-70.2 134.5-75.1 50.4-5 105.1 17.9 127.1 58z;
					
									M404.4 176.7c20.9 16.4 20.8 58.8 38.8 106.2 18.1 47.4 54.4 99.7 40.9 123.6-13.5 23.9-76.7 19.3-131.6 40.4-54.8 21-101.2 67.7-150.5 71.7-49.4 4.1-101.7-34.5-107.8-81.9C88 389.2 128 333 144.2 278c16.2-55.1 8.5-108.8 30.5-125 22-16.1 73.7 5.5 120.4 11.3 46.7 5.9 88.5-3.9 109.3 12.4z;
                  
                  M431.3 121.9c22 40.1 11.3 97.5 13.3 146.9 2 49.5 16.6 91.1 4.3 121.8-12.2 30.6-51.3 50.4-88.5 55.1-37.1 4.7-72.4-5.7-108.8-17.1-36.5-11.3-74.1-23.7-104-52-29.9-28.2-52-72.4-48.4-115.4 3.5-43 32.7-84.8 70.5-122.2 37.7-37.3 84-70.2 134.5-75.1 50.4-5 105.1 17.9 127.1 58z;" />
      </path>
    </svg>

  </div>
</main>
:root {
  --backgroundColor: #ffffff;
  --firstColor: #00D69C;
  --secondColor: #C52AFC;
  --thirdColor: #FF1F00;
  --fourthColor: #FFD600;
  --dropShadowColor: rgba(0, 0, 0, .7);
}

html,
body {
  overflow: hidden;
  background-color: var(--backgroundColor);
}

main {
  display: grid;
  width: 100vw;
  height: 100vh;
}

.blob {
  margin: auto;
}

svg {
  transform-origin: 25% 25%;
  animation: move 24s ease-in-out infinite;
}

@keyframes move {
  0%   { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10px var(--dropShadowColor)); }
  25%  { transform: scale(0.8) translate(5vw, 10vh) rotate(55deg); fill: var(--secondColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
  50%  { transform: scale(0.6) translate(15vw, 5vh) rotate(180deg); fill: var(--thirdColor); filter: drop-shadow( -16px -16px 16px var(--dropShadowColor)); }
  75%  { transform: scale(0.8) translate(5vw, 10h) rotate(55deg); fill: var(--fourthColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
  100% { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10px var(--dropShadowColor)); }
}
// No JavaScript, just CSS and SMIL Animation

//// Please note: 
// * This is not supported in IE or Edge.
// * When testing the SVG simply did not display so could be replaced with a standard SVG or Image for IE and Edge users.

//// Attribution / Doc Links:
// * Blobs created using Blob Maker [https://www.blobmaker.app]
// * SVG Animation with SMIL [https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL]
// * MDN Docs for <animate> [https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate]
// * MDN Docs for @keyframes [https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes]
// * MDN Docs for drop-shadow() [https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow]
// * <animate> Browser compatibility Info [https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate#Browser_compatibility]

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.