帶有湍流的SVG形狀失真

我的問題很簡單：是否有可能用SVG濾鏡重現this effect（圓形畸變動畫）？帶有湍流的SVG形狀失真

我認爲在FeDisplacementMap中使用FeTurbulences會很有趣，因爲它適用於static way。但實際上，我並沒有想讓動畫變得很好的屬性。

<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="warp" seed="0" stichTitles="stitch"></feTurbulence> 
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />

如果您有其他解決方案（JS庫，過濾器等）：請不要猶豫。我願意接受每種解決方案;）

謝謝您的考慮。

來源

2017-03-02 Evan Peuvergne

我曾經創建過類似的效果，但沒有過濾器。我基本上做的是：

創造一個»明星«形狀，或正多邊形的陣列座標，
動畫的座標，讓他們感動，但不失真整體星形太多，
使用Catmul-Rom算法平滑的邊緣，並轉換該結果回貝塞爾路徑數據和應用了一種<path />
施加的高斯模糊生成的路徑上

來源

2017-03-02 14:41:50 philipp

這就是你如何做這種過濾器。 baseFrequency控制變形的粒度，縮放控制位移的大小，Animate控制速度。我製作了動畫效果，並添加了一個陰影，以便與原始圖像更好地匹配。

<svg width="800px" height="600px"> 
 
    <defs> 
 
<filter id="distort"> 
 
    <feTurbulence baseFrequency=".015" type="fractalNoise"/> 
 
    <feColorMatrix type="hueRotate" values="0"> 
 
    <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/> 
 
    </feColorMatrix> 
 
    <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="20"> 
 
    <animate attributeName="scale" values="0;20;50;0" dur="5s" repeatCount="indefinite"/> 
 
    </feDisplacementMap> 
 
    <feGaussianBlur stdDeviation="3"/> 
 
    <feComponentTransfer result="main"> 
 
    <feFuncA type="gamma" amplitude="50" exponent="5"/> 
 
    </feComponentTransfer> 
 
    
 
    <feColorMatrix type="matrix" values="0 0 0 0 0 
 
             0 0 0 0 0 
 
             0 0 0 0 0 
 
             0 0 0 1 0"/> 
 
    <feGaussianBlur stdDeviation="10"/> 
 
    <feComposite operator="over" in="main"/> 
 

 
</filter> 
 
    </defs> 
 
    <circle filter="url(#distort)" cx="200" cy="200" r="150" fill="red"/> 
 
</svg>

來源

2017-03-03 17:07:31

帶有湍流的SVG形狀失真

回答

相關問題