Morphing Gradient Blob

An SVG blob morphs between organic shapes while it slowly turns. Anime.js path morphing.

Original
Anime.js
Reduced-motion ready
Customisable
942 B gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="morphing-blob">
  <svg class="morphing-blob__svg" viewBox="0 0 200 200" width="240" height="240" aria-hidden="true">
    <defs>
      <linearGradient id="morphing-blob-fill" x1="0" y1="0" x2="1" y2="1">
        <stop class="morphing-blob__stop-a" offset="0" />
        <stop class="morphing-blob__stop-b" offset="1" />
      </linearGradient>
    </defs>
    <path
      class="morphing-blob__path"
      fill="url(#morphing-blob-fill)"
      d="M100,20 C150,20 180,55 180,100 C180,150 145,180 100,180 C55,180 20,145 20,100 C20,55 50,20 100,20 Z"
      data-shapes="M100,15 C160,25 190,70 170,110 C150,160 120,185 85,170 C40,160 15,130 25,90 C35,45 55,10 100,15 Z|M110,25 C155,35 175,80 182,105 C185,145 140,175 95,178 C50,180 30,150 22,110 C18,60 70,20 110,25 Z|M100,20 C150,20 180,55 180,100 C180,150 145,180 100,180 C55,180 20,145 20,100 C20,55 50,20 100,20 Z"
    />
  </svg>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Load Anime.js from the CDN (see the JS tab), then add the script.
Adjust the custom properties (--accent, --color-2, --speed) on .morphing-blob to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.