<svg id="svg">
  <defs>
    <filter id="disFilter">
      <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" seed="1" result="turbulence">
        <animate attributeName="baseFrequency" values="0.01;0.005;0.01;" dur="30s" begin="0"
          repeatCount="indefinite" />
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="B"
        result="displacement" />
    </filter>
  </defs>
  <g id="background">
    <image xlink:href="https://klevron.github.io/codepen/misc/water-texture.jpg" x="0" y="0"
      height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
  </g>
</svg>

<div id="main">
  <h1>SVG Water Effect</h1>
  <p>Simply made ^^ with SVG Filters : </p>
  <ul>
    <li>Animated <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence"
        target="_blank">feTurbulence</a>,</li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence"
        target="_blank">feDisplacementMap</a>,</li>
    <li>and a background image.</li>
  </ul>
</div>

body {
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: 'Poppins', sans-serif;
    }

    #svg {
      position: fixed;
      width: 100%;
      height: 100%;
    }

    #background {
      filter: url("#disFilter");
    }

    #main {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 15px solid #fff;
      box-sizing: border-box;
      padding: 4%;
      text-shadow: 1px 1px 5px #fff;
      overflow: hidden;
    }