CodePen Embed - WNRqXgP

<body style="margin: 0;">
  <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28">

    <defs>
      <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18 s 58 18 88 18 58-18 88-18  58 18 88 18 v44h-352z" />
    </defs>
    <g class="parallax">
      <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2" />

      <image xlink:href="https://www.pngkit.com/png/full/390-3901421_ocean-png-9-foot-long-shark.png" width="60" height="20" x="200" y="30">
        <animate attributeType="XML" attributeName="x" dur="6s" values="180; 80; 60; 40; 20; 0" repeatCount="indefinite" />

        <animate attributeType="XML" attributeName="y" begin="0s" dur="6s" values="30; 30; 25; 28; 30; 30" repeatCount="indefinite" />
      </image>

      <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1" />
      <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa" />
    </g>

  </svg>

This Pen is owned by topicstarter on CodePen.

See more by @topicstarter on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.