css-svg-distort.html

CSS SVG Liquid Distortion

  <svg width="0" height="0">
    <defs>
      <filter id="distort">
        <feTurbulence baseFrequency=".001" type="fractalNoise" seed="200" />
        <feColorMatrix type="hueRotate" values="0">
          <animate attributeName="values" from="0" to="360" dur="8s" repeatCount="indefinite" />
        </feColorMatrix>
        <feDisplacementMap in="SourceGraphic" in2="main" xChannelSelector="R" yChannelSelector="B" scale="200" />
        <feGaussianBlur id="blur-amount" stdDeviation="3" />
        <feComponentTransfer result="main">
          <feFuncA type="gamma" amplitude="100" exponent="3" />
        </feComponentTransfer>

        <feColorMatrix type="matrix" values="0 0 0 0 0 
                                             0 0 0 0 0
                                             0 0 0 0 0
                                             0 0 0 0 0" />
        <feGaussianBlur stdDeviation="10" />
        <feComposite operator="over" in="main" />
        <feGaussianBlur stdDeviation="0" />
      </filter>
    </defs>
  </svg>