Safari does not show the svg

Question

I have an svg code in my index.html file but it doesnt appear on Safari. I tryed differend solutions those are not working for me

<svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" style="overflow: visible; filter:blur(18px)"
      >

      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop>
          <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop>
        </linearGradient>
      </defs>
      <path fill="url(#gradient)">
        <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values="
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z;
M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z;
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
   
"></animate>
      </path>
    </svg>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop>
        <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop>
      </linearGradient>
    </defs>
    <path fill="url(#gradient)">
      <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values="
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z;
M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z;
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
   
"></animate>
    </path>
  </svg>`
 

There should be a small blob animation which changes shape based on svg

Answer 1

As Robert says in the comments, the SVG has a weird duplicate. Looks like you copy-pasted some lines inside the same SVG

Cleaned the SVG; Runs just fine in FireFox for me:

<style>
  svg {
    height: 160px;
    overflow: visible; 
    filter: blur(18px);
  }
</style>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop>
      <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop>
    </linearGradient>
  </defs>
  <path fill="url(#gradient)">
    <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values="
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z;
M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z;
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z">
    </animate>
  </path>
</svg>`