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>

Leave a Reply

Your email address will not be published. Required fields are marked *