Blending SVG filter-CodePudding

I feel like I'm almost there with this. I'm trying to achieve the same result as the GIF within the snippet (mainly the ripple effect on the 'sun'). Advice on how to do this or a cleaner alternate method would be welcomed.

body {
  background: grey
}
svg {
  background-color: #fff
 }

<svg width="200" height="200" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
     <filter id="vapourwave">
       
      <feTurbulence id="turb" type="fractalNoise" numOctaves="1" baseFrequency=".04,.2" seed="5" result="turb"/>
       
      <feColorMatrix in="turb" type="hueRotate" values="0" result="turb">
        <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
      </feColorMatrix>       
       
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turb" scale="20"/>
       
       
    </filter>
    
     <clipPath id="clip-1">  
       <rect x="0" y="140" width="300" height="200" /> 
     </clipPath>  
    
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>    
    
    </defs>
  
  <circle cx="100" cy="100" r="100" fill="url('#myGradient')"/>
  <circle cx="100" cy="105" r="100" filter="url(#vapourwave)" clip-path="url(#clip-1)"/>  

</svg>


<img src="https://s9.gifyu.com/images/ezgif.com-gif-maker36ade78f49932edd.gif" alt="">

CodePudding user response：

I see what you are doing with the clip-path, but I think that this is easier to control whit a mask. Here I made a mask on a rectangle that makes the shape of a circle. The mask also has a mask to split up the part that needs the filter. I added a bit of drop shadow as well.

body {
  background: #000;
}

<svg width="200" height="220" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="vapourwave">
      <feTurbulence id="turb" type="fractalNoise" numOctaves="1" baseFrequency=".04,.2" seed="5" result="turb"/>
      <feColorMatrix in="turb" type="hueRotate" values="0" result="turb">
        <animate attributeName="values" from="0" to="360" dur="2s" repeatCount="indefinite"/>
      </feColorMatrix>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turb" scale="40"/>
      <feDropShadow dx="0" dy="0" stdDeviation="10"
          flood-color="white" />
    </filter>
    
    <filter id="shadow">
      <feDropShadow dx="0" dy="0" stdDeviation="10"
          flood-color="white" />
    </filter>

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="red" />
      <stop offset="30%" stop-color="red" />
      <stop offset="70%"  stop-color="orange" />
      <stop offset="95%"  stop-color="orange" />
    </linearGradient>
    
    <mask id="m2">
      <rect y="120" width="200" height="80" fill="white" />
    </mask>
    <mask id="m3">
      <circle cx="100" cy="100" r="90" fill="white" filter="url(#shadow)" />
      <rect y="120" width="200" height="80" fill="black" />
      <circle cx="100" cy="100" r="90" fill="white" mask="url(#m2)"  filter="url(#vapourwave)"/>
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="url('#myGradient')" mask="url(#m3)" />
</svg>

<img src="https://s9.gifyu.com/images/ezgif.com-gif-maker36ade78f49932edd.gif" width="300" alt="">