Search code examples
animationsvgsvg-animate

Animate tag on svg doesn't animate

I'm trying to create an animated blob following this tutorial, but I can't seem to get it working. It just changes state but it doesn't animate. What I want is a result similar to the one of the video.

This is the result I ended up with:

Result

This is the SVG:

<svg
  viewBox="0 0 800 500"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
>
  <path
    fill="none"
    strokeWidth="7px"
    stroke="#d1d8e0"
    transform="translate(150.543 -11.9)"
  >
    <animate
      attributeName="d"
      dur="10000ms"
      repeatCount="indefinite"
      values="M397.5 334.5q-50.5 84.5-137 66t-158-84.5q-71.5-66-4-138.5t165.5-97Q362 56 405 153t-7.5 181.5z;
        M375.5,316Q326,382,250,381.5Q174,381,100.5,315.5Q27,250,91.5,169Q156,88,243,100Q330,112,377.5,181Q425,250,375.5,316Z;
        
        M397.5 334.5q-50.5 84.5-137 66t-158-84.5q-71.5-66-4-138.5t165.5-97Q362 56 405 153t-7.5 181.5z;"
    >
    </animate>
  </path>
</svg>

I'm using Next.js and TailwindCSS if that matters.

Solution

  • In the next example I'm using your values but written with different commands so that all 3 curves have the same number of commands and the same type of commands. Now it works.

    <svg
      viewBox="0 0 800 500"
      preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
    >
      <path
        d="M397.5,334.5
           Q347,419 260.5,400.5
           Q174,382 102.5,316
           Q31,250 98.5,177.5
           Q166,105 264,80.5
           Q362,56 405,153
           Q448,250 397.5,334.5Z"
        fill="gold"
        strokeWidth="7px"
        stroke="#d1d8e0"
        transform="translate(150.543 -11.9)"
      >
        <animate
          attributeName="d"
          dur="10000ms"
          repeatCount="indefinite"
          values="M397.5,334.5
                  Q347,419 260.5,400.5
                  Q174,382 102.5,316
                  Q31,250 98.5,177.5
                  Q166,105 264,80.5
                  Q362,56 405,153
                  Q448,250 397.5,334.5Z;
                  
                  M375.5,316
                  Q326,382,250,381.5
                  Q174,381,100.5,315.5
                  Q27,250,91.5,169
                  Q156,88,243,100
                  Q330,112,377.5,181
                  Q425,250,375.5,316Z;
            
                  M397.5,334.5
                  Q347,419 260.5,400.5
                  Q174,382 102.5,316
                  Q31,250 98.5,177.5
                  Q166,105 264,80.5
                  Q362,56 405,153
                  Q448,250 397.5,334.5Z"
        >
        </animate>
      </path>
    </svg>