Preview:
<div style={{position: 'absolute', width: '300px', height: '300px'}}>
        <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%">
          <path fill="url(#gradient)">
            <animate
              attributeName='d'
              dur='10000ms'
              repeatCount='indefinite'
              values='
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
                M382.5,342Q310,434,205.5,396Q101,358,98.5,248Q96,138,207.5,87.5Q319,37,387,143.5Q455,250,382.5,342Z;
                M399.5,340.5Q309,431,207.5,393Q106,355,101.5,247Q97,139,201.5,108.5Q306,78,398,164Q490,250,399.5,340.5Z;
                M383.5,362Q323,474,210.5,417Q98,360,78,235Q58,110,185.5,83Q313,56,378.5,153Q444,250,383.5,362Z;
                M393,341.5Q310,433,201,399Q92,365,70,234Q48,103,176,93Q304,83,390,166.5Q476,250,393,341.5Z;
              '
            >
            </animate>
          </path>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style={{stopColor: 'rgb(255, 95, 109)'}}/>
              <stop offset="100%" style={{stopColor: 'rgb(255, 195, 113)'}}/>
            </linearGradient>
          </defs>
        </svg>
      </div>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter