SVG distortion
Put the following svg inside a container that contains the image you want to distort.
<svg style="display:none;">
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence id="svg-waves"
numOctaves="2"
seed="2"
type="fractalNoise"
result="waveturb"
baseFrequency=".015 .04">
<animate id="noiseAnimate"
attributeName="baseFrequency"
values=".015 .04;.007 .015;.015 .04"
from="0" to="100" dur="30s"
repeatCount="indefinite">
</animate>
</feTurbulence>
<feDisplacementMap scale="25" in="SourceGraphic" result="wavedispl">
<animate id="scaleAnimate"
attributeName="scale"
values="25;45;25"
from="0" to="100" dur="40s"
repeatCount="indefinite">
</animate>
</feDisplacementMap>
</filter>
</svg>