混合 SVG 滤镜

Question

我觉得我快完成了。我试图在片段中实现与 GIF 相同的结果（主要是 'sun' 上的涟漪效应）。欢迎提供有关如何执行此操作或更清洁的替代方法的建议。

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="">

Answer 1

我知道你在用剪辑路径做什么，但我认为这更容易控制蒙版。在这里，我在一个矩形上制作了一个遮罩，形成一个圆形。面具还有一个面具来分割需要过滤器的部分。我也添加了一点阴影。

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="">

混合 SVG 滤镜

Blending SVG filter

svg

svg-animate

svg-filters