<h1><span>CSS/SVG</span> animated blobs</h1>

<div class="svgblob">
  <svg viewBox="0 0 500 500" preserveAspectRatio="none"             
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
      <linearGradient id="blobgradient-1">
        <stop offset="0%" stop-color="#e8e8e8"></stop>
        <stop offset="100%" stop-color="#e8e8e8"></stop>
      </linearGradient>
    </defs>

    <mask id="blobmask-1">
      <rect></rect>
       
      <path>

        <animate attributeName="d" begin="-2s" dur="15s" 
                 repeatCount="indefinite" values="

M42.4,-69.5C54.5,-66.4,63.6,-54.2,59.1,-41.1C54.6,-28,36.6,-14,38.4,1C40.2,16.1,61.9,32.2,67,46.3C72,60.4,60.5,72.6,46.6,69.5C32.6,66.4,16.3,48,3.4,42.1C-9.5,36.1,-19,42.7,-32.2,45.4C-45.4,48.1,-62.4,47,-67.3,38.8C-72.2,30.6,-64.9,15.3,-61,2.3C-57.1,-10.8,-56.5,-21.5,-54.9,-35.4C-53.3,-49.3,-50.7,-66.3,-41.4,-70.9C-32,-75.5,-16,-67.9,-0.4,-67.1C15.1,-66.3,30.3,-72.5,42.4,-69.5Z;
         M33.1,-67.4C35.6,-55.9,25.3,-32.3,24,-19C22.8,-5.8,30.6,-2.9,37.2,3.8C43.8,10.5,49.3,21.1,47.1,28.4C44.9,35.7,35.2,39.9,26.1,47.4C16.9,54.9,8.5,65.8,1.5,63.2C-5.5,60.6,-11,44.6,-22.2,38.3C-33.4,31.9,-50.3,35.4,-51,30.6C-51.7,25.8,-36.2,12.9,-27.7,4.9C-19.1,-3.1,-17.5,-6.1,-16.8,-10.8C-16,-15.5,-16.1,-21.8,-13.5,-33.2C-10.8,-44.6,-5.4,-61.2,5,-69.8C15.3,-78.3,30.6,-78.9,33.1,-67.4Z;
         M30.3,-57C40.4,-46.6,50.4,-40.8,51.7,-32C52.9,-23.3,45.4,-11.6,39.4,-3.4C33.5,4.8,29.1,9.5,30.8,23.3C32.4,37,40,59.7,35.8,63.9C31.7,68.1,15.8,53.8,4.7,45.6C-6.4,37.4,-12.7,35.2,-22.6,34.3C-32.5,33.5,-46,33.9,-57.7,28.4C-69.3,22.9,-79,11.5,-78.3,0.5C-77.5,-10.5,-66.1,-21.1,-54.8,-27C-43.4,-33,-32,-34.3,-22.9,-45.3C-13.7,-56.2,-6.9,-76.6,1.6,-79.4C10.1,-82.2,20.2,-67.4,30.3,-57Z;
         M27.3,-56.9C30,-45.7,23.2,-27.6,28.1,-16.9C32.9,-6.3,49.5,-3.2,52.9,2C56.3,7.1,46.6,14.2,40,21.8C33.4,29.3,29.8,37.3,23.6,40.1C17.5,43,8.7,40.5,-1.6,43.2C-11.8,45.9,-23.7,53.7,-30.2,51.1C-36.6,48.5,-37.8,35.5,-46.3,25.2C-54.9,15,-71,7.5,-78.2,-4.2C-85.5,-15.9,-84.1,-31.8,-75.7,-42.5C-67.4,-53.2,-52.3,-58.8,-38.5,-63.7C-24.8,-68.5,-12.4,-72.7,-0.1,-72.6C12.3,-72.5,24.5,-68.1,27.3,-56.9Z;
         M35,-59.3C44.5,-55,50.9,-44.1,56.4,-33.1C61.9,-22,66.6,-11,61.4,-3C56.3,5.1,41.3,10.1,33.5,17.2C25.8,24.3,25.2,33.5,20.8,45.8C16.4,58.2,8.2,73.7,2.8,68.8C-2.5,63.9,-5.1,38.5,-15.7,29.8C-26.3,21,-44.9,28.9,-52.1,26.7C-59.3,24.5,-55,12.2,-55.6,-0.3C-56.2,-12.9,-61.7,-25.9,-56.8,-32C-51.9,-38.2,-36.6,-37.6,-25.4,-40.9C-14.2,-44.2,-7.1,-51.4,2.8,-56.2C12.7,-61,25.4,-63.5,35,-59.3Z;
         M35.2,-56.3C48,-53.6,62.4,-49,65.9,-39.3C69.4,-29.6,61.9,-14.8,51.2,-6.2C40.5,2.4,26.5,4.8,18.8,7.2C11.1,9.6,9.7,11.9,7.6,17C5.5,22,2.7,29.9,-2.8,34.8C-8.4,39.7,-16.8,41.7,-19.7,37.1C-22.7,32.5,-20.1,21.3,-30.2,14C-40.3,6.7,-63.1,3.4,-73.7,-6.1C-84.3,-15.6,-82.7,-31.2,-69.9,-33.9C-57.2,-36.7,-33.4,-26.6,-19.8,-28.9C-6.3,-31.2,-3.2,-45.9,4,-52.9C11.2,-59.8,22.4,-59,35.2,-56.3Z;
         M42.4,-69.5C54.5,-66.4,63.6,-54.2,59.1,-41.1C54.6,-28,36.6,-14,38.4,1C40.2,16.1,61.9,32.2,67,46.3C72,60.4,60.5,72.6,46.6,69.5C32.6,66.4,16.3,48,3.4,42.1C-9.5,36.1,-19,42.7,-32.2,45.4C-45.4,48.1,-62.4,47,-67.3,38.8C-72.2,30.6,-64.9,15.3,-61,2.3C-57.1,-10.8,-56.5,-21.5,-54.9,-35.4C-53.3,-49.3,-50.7,-66.3,-41.4,-70.9C-32,-75.5,-16,-67.9,-0.4,-67.1C15.1,-66.3,30.3,-72.5,42.4,-69.5Z;
       "></animate>
      </path>
    </mask>


    <rect width="500" height="500" 
          mask="url('#blobmask-1')" fill="url('#blobgradient-1')"></rect>
  </svg>

  <img src="https://picsum.photos/id/20/550/300" />
</div>

<div class="svgblob">
  <svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="SvgBlob_svgblob__4gJFY">
    <defs>
      <linearGradient id="blobgradient-2" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="peachpuff"></stop>
        <stop offset="100%" stop-color="palegreen"></stop>
      </linearGradient>
    </defs>
     
    <mask id="blobmask-2">
      <rect></rect>
      <path>
        <animate attributeName="d" dur="15s" repeatCount="indefinite" begin="-4s" values="
         M27.3,-56.9C30,-45.7,23.2,-27.6,28.1,-16.9C32.9,-6.3,49.5,-3.2,52.9,2C56.3,7.1,46.6,14.2,40,21.8C33.4,29.3,29.8,37.3,23.6,40.1C17.5,43,8.7,40.5,-1.6,43.2C-11.8,45.9,-23.7,53.7,-30.2,51.1C-36.6,48.5,-37.8,35.5,-46.3,25.2C-54.9,15,-71,7.5,-78.2,-4.2C-85.5,-15.9,-84.1,-31.8,-75.7,-42.5C-67.4,-53.2,-52.3,-58.8,-38.5,-63.7C-24.8,-68.5,-12.4,-72.7,-0.1,-72.6C12.3,-72.5,24.5,-68.1,27.3,-56.9Z;
         M25.4,-39.1C38.5,-36.5,58.5,-40.9,67.6,-35.6C76.6,-30.2,74.8,-15.1,66.2,-4.9C57.7,5.3,42.5,10.5,36.7,21.5C30.9,32.5,34.5,49.3,30,52.7C25.4,56.2,12.7,46.3,0.6,45.2C-11.5,44.1,-22.9,51.8,-32.3,51.2C-41.7,50.5,-48.9,41.5,-49.3,31.6C-49.6,21.6,-42.9,10.8,-39.6,1.9C-36.3,-7,-36.4,-14,-35.1,-22.2C-33.7,-30.4,-31,-39.7,-25,-46.4C-18.9,-53,-9.4,-57,-1.6,-54.1C6.2,-51.3,12.4,-41.7,25.4,-39.1Z;
         M28.6,-56.1C30.7,-48.2,21.8,-27.9,19.5,-16.4C17.2,-5,21.4,-2.5,26.9,3.2C32.3,8.8,39.1,17.6,41,28.4C42.9,39.2,40.1,51.9,32.5,57.4C24.9,62.9,12.4,61.1,-0.5,62C-13.4,62.9,-26.9,66.4,-36.9,62.3C-46.9,58.1,-53.6,46.4,-58.6,34.8C-63.7,23.2,-67.2,11.6,-70.9,-2.1C-74.6,-15.8,-78.5,-31.7,-68.8,-35.4C-59.1,-39,-35.9,-30.5,-22.2,-31.7C-8.5,-32.9,-4.2,-43.9,4.5,-51.6C13.2,-59.4,26.4,-64,28.6,-56.1Z;
         M19.9,-36.5C29.9,-28.8,44.8,-31.6,54.2,-27.3C63.7,-23,67.7,-11.5,68.7,0.6C69.7,12.6,67.6,25.2,61.5,35.4C55.4,45.6,45.3,53.3,34.4,51.2C23.5,49.1,11.7,37.2,0.5,36.4C-10.8,35.7,-21.6,45.9,-23.5,42.8C-25.3,39.6,-18.1,22.9,-15.4,13.6C-12.8,4.2,-14.7,2.1,-22.3,-4.4C-29.9,-10.9,-43.2,-21.7,-48.7,-36.1C-54.2,-50.4,-51.9,-68.2,-42.5,-76.2C-33.1,-84.2,-16.6,-82.4,-5.8,-72.4C5,-62.3,10,-44.2,19.9,-36.5Z;
         M35.2,-56.3C48,-53.6,62.4,-49,65.9,-39.3C69.4,-29.6,61.9,-14.8,51.2,-6.2C40.5,2.4,26.5,4.8,18.8,7.2C11.1,9.6,9.7,11.9,7.6,17C5.5,22,2.7,29.9,-2.8,34.8C-8.4,39.7,-16.8,41.7,-19.7,37.1C-22.7,32.5,-20.1,21.3,-30.2,14C-40.3,6.7,-63.1,3.4,-73.7,-6.1C-84.3,-15.6,-82.7,-31.2,-69.9,-33.9C-57.2,-36.7,-33.4,-26.6,-19.8,-28.9C-6.3,-31.2,-3.2,-45.9,4,-52.9C11.2,-59.8,22.4,-59,35.2,-56.3Z;
         M38,-61.7C51,-58.4,64.5,-51.7,74.4,-40.8C84.3,-30,90.7,-15,88.8,-1.1C86.9,12.9,76.9,25.7,61.9,27.8C46.9,29.9,27.1,21.2,15.9,24.3C4.8,27.4,2.4,42.4,-6.9,54.3C-16.2,66.2,-32.3,75.1,-36.5,67.9C-40.6,60.8,-32.7,37.6,-40.8,23.6C-48.9,9.6,-73,4.8,-78.4,-3.1C-83.8,-11,-70.6,-22,-58.6,-29.4C-46.7,-36.7,-36.1,-40.4,-26.5,-45.8C-17,-51.1,-8.5,-58.2,2,-61.7C12.5,-65.2,25,-65.1,38,-61.7Z;
         M27.3,-56.9C30,-45.7,23.2,-27.6,28.1,-16.9C32.9,-6.3,49.5,-3.2,52.9,2C56.3,7.1,46.6,14.2,40,21.8C33.4,29.3,29.8,37.3,23.6,40.1C17.5,43,8.7,40.5,-1.6,43.2C-11.8,45.9,-23.7,53.7,-30.2,51.1C-36.6,48.5,-37.8,35.5,-46.3,25.2C-54.9,15,-71,7.5,-78.2,-4.2C-85.5,-15.9,-84.1,-31.8,-75.7,-42.5C-67.4,-53.2,-52.3,-58.8,-38.5,-63.7C-24.8,-68.5,-12.4,-72.7,-0.1,-72.6C12.3,-72.5,24.5,-68.1,27.3,-56.9Z;
       "></animate>
      </path>
    </mask>

    <rect x="0" y="0" width="500" height="500" 
          mask="url('#blobmask-2')" fill="url('#blobgradient-2')"></rect>
  </svg>

  <img src="https://picsum.photos/300/560" />
   
</div>

<div class="svgblob" style="border: 0; outline-offset: -1px; outline: 3px #e8e8e8 solid; border-radius: 50%;">
  <svg viewBox="0 0 500 500" preserveAspectRatio="none"             
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
      <linearGradient id="blobgradient-3">
        <stop offset="0%" stop-color="#e8e8e8"></stop>
        <stop offset="100%" stop-color="#e8e8e8"></stop>
      </linearGradient>
    </defs>

    <mask id="blobmask-3">
      <rect></rect>
      <path>

        <animate attributeName="d" begin="-6s" dur="15s" 
                 repeatCount="indefinite" values="

M42.4,-69.5C54.5,-66.4,63.6,-54.2,59.1,-41.1C54.6,-28,36.6,-14,38.4,1C40.2,16.1,61.9,32.2,67,46.3C72,60.4,60.5,72.6,46.6,69.5C32.6,66.4,16.3,48,3.4,42.1C-9.5,36.1,-19,42.7,-32.2,45.4C-45.4,48.1,-62.4,47,-67.3,38.8C-72.2,30.6,-64.9,15.3,-61,2.3C-57.1,-10.8,-56.5,-21.5,-54.9,-35.4C-53.3,-49.3,-50.7,-66.3,-41.4,-70.9C-32,-75.5,-16,-67.9,-0.4,-67.1C15.1,-66.3,30.3,-72.5,42.4,-69.5Z;
         M33.1,-67.4C35.6,-55.9,25.3,-32.3,24,-19C22.8,-5.8,30.6,-2.9,37.2,3.8C43.8,10.5,49.3,21.1,47.1,28.4C44.9,35.7,35.2,39.9,26.1,47.4C16.9,54.9,8.5,65.8,1.5,63.2C-5.5,60.6,-11,44.6,-22.2,38.3C-33.4,31.9,-50.3,35.4,-51,30.6C-51.7,25.8,-36.2,12.9,-27.7,4.9C-19.1,-3.1,-17.5,-6.1,-16.8,-10.8C-16,-15.5,-16.1,-21.8,-13.5,-33.2C-10.8,-44.6,-5.4,-61.2,5,-69.8C15.3,-78.3,30.6,-78.9,33.1,-67.4Z;
         M30.3,-57C40.4,-46.6,50.4,-40.8,51.7,-32C52.9,-23.3,45.4,-11.6,39.4,-3.4C33.5,4.8,29.1,9.5,30.8,23.3C32.4,37,40,59.7,35.8,63.9C31.7,68.1,15.8,53.8,4.7,45.6C-6.4,37.4,-12.7,35.2,-22.6,34.3C-32.5,33.5,-46,33.9,-57.7,28.4C-69.3,22.9,-79,11.5,-78.3,0.5C-77.5,-10.5,-66.1,-21.1,-54.8,-27C-43.4,-33,-32,-34.3,-22.9,-45.3C-13.7,-56.2,-6.9,-76.6,1.6,-79.4C10.1,-82.2,20.2,-67.4,30.3,-57Z;
         M27.3,-56.9C30,-45.7,23.2,-27.6,28.1,-16.9C32.9,-6.3,49.5,-3.2,52.9,2C56.3,7.1,46.6,14.2,40,21.8C33.4,29.3,29.8,37.3,23.6,40.1C17.5,43,8.7,40.5,-1.6,43.2C-11.8,45.9,-23.7,53.7,-30.2,51.1C-36.6,48.5,-37.8,35.5,-46.3,25.2C-54.9,15,-71,7.5,-78.2,-4.2C-85.5,-15.9,-84.1,-31.8,-75.7,-42.5C-67.4,-53.2,-52.3,-58.8,-38.5,-63.7C-24.8,-68.5,-12.4,-72.7,-0.1,-72.6C12.3,-72.5,24.5,-68.1,27.3,-56.9Z;
         M35,-59.3C44.5,-55,50.9,-44.1,56.4,-33.1C61.9,-22,66.6,-11,61.4,-3C56.3,5.1,41.3,10.1,33.5,17.2C25.8,24.3,25.2,33.5,20.8,45.8C16.4,58.2,8.2,73.7,2.8,68.8C-2.5,63.9,-5.1,38.5,-15.7,29.8C-26.3,21,-44.9,28.9,-52.1,26.7C-59.3,24.5,-55,12.2,-55.6,-0.3C-56.2,-12.9,-61.7,-25.9,-56.8,-32C-51.9,-38.2,-36.6,-37.6,-25.4,-40.9C-14.2,-44.2,-7.1,-51.4,2.8,-56.2C12.7,-61,25.4,-63.5,35,-59.3Z;
         M35.2,-56.3C48,-53.6,62.4,-49,65.9,-39.3C69.4,-29.6,61.9,-14.8,51.2,-6.2C40.5,2.4,26.5,4.8,18.8,7.2C11.1,9.6,9.7,11.9,7.6,17C5.5,22,2.7,29.9,-2.8,34.8C-8.4,39.7,-16.8,41.7,-19.7,37.1C-22.7,32.5,-20.1,21.3,-30.2,14C-40.3,6.7,-63.1,3.4,-73.7,-6.1C-84.3,-15.6,-82.7,-31.2,-69.9,-33.9C-57.2,-36.7,-33.4,-26.6,-19.8,-28.9C-6.3,-31.2,-3.2,-45.9,4,-52.9C11.2,-59.8,22.4,-59,35.2,-56.3Z;
         M42.4,-69.5C54.5,-66.4,63.6,-54.2,59.1,-41.1C54.6,-28,36.6,-14,38.4,1C40.2,16.1,61.9,32.2,67,46.3C72,60.4,60.5,72.6,46.6,69.5C32.6,66.4,16.3,48,3.4,42.1C-9.5,36.1,-19,42.7,-32.2,45.4C-45.4,48.1,-62.4,47,-67.3,38.8C-72.2,30.6,-64.9,15.3,-61,2.3C-57.1,-10.8,-56.5,-21.5,-54.9,-35.4C-53.3,-49.3,-50.7,-66.3,-41.4,-70.9C-32,-75.5,-16,-67.9,-0.4,-67.1C15.1,-66.3,30.3,-72.5,42.4,-69.5Z;
       "></animate>
      </path>
    </mask>


    <rect x="-1" y="-1" width="502" height="502" 
          mask="url('#blobmask-3')" fill="url('#blobgradient-3')"></rect>
  </svg>

  <img src="https://picsum.photos/500/500" />
</div>