<svg width="1000" height="500" viewBox="0 0 1000 500" stroke="#000" stroke-width="2">
		<defs>
				<filter id="textFilter">
						<feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" result="turbulence" data-filterId="5" />
						<feDisplacementMap id="distortion" in="SourceGraphic" in2="turbulence" scale="20">
<!-- 								<animate attributeName="scale" values="40; 60; 40" dur="10s" repeatCount="indefinite"></animate> -->
						</feDisplacementMap>
				</filter>
		</defs>
		<text x="10%" y="40%" font-size="150" fill="#3d56ce" stroke="#8999e5" filter="url(#textFilter)">
				Underwater
		</text>
</svg>

@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
body {
		background: #c0c8ea;
		height:100vh;
		display: flex;
		justify-content: center;
}

svg text {
		font-family: 'Oswald', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		stroke-width: 3px;
		stroke-linejoin: round;
}

var tl = new TimelineMax({
	repeat:-1,
	yoyo:true
});

tl.to("#distortion", 1, {attr:{scale:60}, ease:Power2.easeOut})
.to("#distortion", 1, {attr:{scale:40}, ease:Power2.easeOut});