<!-- Inspiration here: https://www.tutpad.com/tutorials/animation-turn-vectors-into-life-part-i -->
<svg xmlns="http://www.w3.org/2000/svg" class="wave">
   <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="#b9a9e5" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#89408c" stop-opacity="1"/>
   </linearGradient>
   <path id="feel-the-wave"  fill="url(#grad-ucgg-generated)" d=""/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="wave">
   <path id="feel-the-wave-two" d=""/>
</svg>


<svg class="octo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1088.1 1063">
   <g id="leg1">
      <path class="st0" d="M408.9,339.3c0.2,102-0.3,192.2-1.4,292C406.4,740.6,415.1,853,244.9,853"/>
      <polyline class="st0" points="407.5,292.3 407.5,740.9 407.5,872.8 	"/>
   </g>
   <g id="leg2">
      <path class="st0" d="M496.5,279.3c0,0,0.5,182.3,0,310.1c-0.6,139,11.5,234.9-49.5,317.9"/>
      <polyline class="st0" points="496.4,231.2 496.4,679.8 496.4,811.7 	"/>
   </g>
   <g id="leg3">
      <path class="st0" d="M584.8,320.5c0,0,0.7,182.3,0,310.1c-0.8,138,50.1,214.7,77.1,254.7"/>
      <polyline class="st0" points="584.8,272.5 584.8,721 584.8,853 	"/>
   </g>
   <g id="leg4">
      <path class="st0" d="M671.9,381.3c0,0,0,139,5.2,259c4.7,109.2,70.1,144,141.8,169"/>
      <polyline class="st0" points="673.6,243.7 673.6,692.3 673.6,824.2 	"/>
   </g>
   <g id="head">
      <path id="tall" class="st1" d="M365.3,262.4v235.9h350V235h-0.5c-6.9-91.8-82.5-164.2-174.7-164.2S372.2,143.1,365.3,235h0v0"/>
      <path id="short" class="st1" d="M365.3,262.4v295.9h350V235h-0.5c-6.9-91.8-82.5-164.2-174.7-164.2S372.2,143.1,365.3,235h0v0"/>
   </g>
   <g id="eyeright">
      <path class="st2" d="M475.1,259.3c0-11.8,8.1-18,16.3-18.3c8.5-0.3,17.3,5.6,17.5,18.3"/>
      <path class="st3" d="M513.5,257.9c0-11.9-9.6-21.5-21.5-21.5c-11.9,0-21.5,9.4-21.5,21.5C470.6,285.8,513.5,286.1,513.5,257.9z"/>
   </g>
   <g id="eyeleft">
      <path class="st2" d="M576.5,259.3c0-11.8,8.1-18,16.3-18.3c8.5-0.3,17.3,5.6,17.5,18.3"/>
      <path class="st3" d="M615,257.9c0-11.9-9.6-21.5-21.5-21.5c-11.9,0-21.5,9.4-21.5,21.5C572,285.8,615,286.1,615,257.9z"/>
   </g>
   <g id="spots">
      <circle fill="url(#smallGradient)" class="st4" cx="460" cy="153.3" r="42.4"/>
      <circle fill="url(#smallGradient)" class="st4" cx="520.1" cy="101.9" r="22.5"/>
      <circle fill="url(#smallGradient)" class="st4" cx="403.5" cy="206.6" r="22.5"/>
      <circle fill="url(#smallGradient)" class="st4" cx="567.9" cy="93.2" r="13.8"/>
      <circle fill="url(#smallGradient)" class="st4" cx="528" cy="148.3" r="16.5"/>
   </g>
   <g id="sidespots">
      <circle fill="url(#smallGradient)" class="st4" cx="682" cy="356.7" r="24.6"/>
      <circle fill="url(#smallGradient)" class="st4" cx="691.5" cy="307.9" r="11.6"/>
      <circle fill="url(#smallGradient)" class="st4" cx="651.5" cy="313.7" r="17.4"/>
      <circle fill="url(#smallGradient)" class="st4" cx="668.9" cy="403.4" r="11.6"/>
   </g>

</svg>


<svg class="fish" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">

<g>
	<path id="body_3_" class="st0" d="M105.5,138.2c4.3,2.8,4.3,8.4,0,11.2c-5.8,3.8-14.6,8.1-24.4,8.1c-17.5,0-31.7-13.7-31.7-13.7
		s14.2-13.7,31.7-13.7C90.9,130.2,99.7,134.5,105.5,138.2z"/>
	<path id="tailfin_3_" class="st1" d="M36.2,128.4l1.3,8.3c0.8,4.7,0.8,9.5,0,14.3l-1.3,8.3c-0.2,1.5,1.6,2.4,2.6,1.4l13.4-12.9
		c2.2-2.1,2.2-5.7,0-7.8L38.8,127C37.7,126,35.9,126.9,36.2,128.4z"/>
	<path id="fin_3_" class="st1" d="M76.1,137.8l0.5,3.2c0.3,1.9,0.3,3.7,0,5.6l-0.5,3.2c-0.1,0.6,0.6,1,1,0.5l5.3-5.1
		c0.9-0.8,0.9-2.2,0-3.1l-5.3-5.1C76.7,136.8,76,137.2,76.1,137.8z"/>
	<circle id="eye_3_" class="st2" cx="97.6" cy="139.4" r="2"/>
</g>
<g>
	<path id="body_2_" class="st0" d="M164.9,192.9c4.3,2.8,4.3,8.4,0,11.2c-5.8,3.8-14.6,8.1-24.4,8.1c-17.5,0-31.7-13.7-31.7-13.7
		s14.2-13.7,31.7-13.7C150.4,184.8,159.1,189.1,164.9,192.9z"/>
	<path id="tailfin_2_" class="st1" d="M95.6,183l1.3,8.3c0.8,4.7,0.8,9.5,0,14.3l-1.3,8.3c-0.2,1.5,1.6,2.4,2.6,1.4l13.4-12.9
		c2.2-2.1,2.2-5.7,0-7.8l-13.4-12.9C97.2,180.6,95.4,181.5,95.6,183z"/>
	<path id="fin_2_" class="st1" d="M135.5,192.4l0.5,3.2c0.3,1.9,0.3,3.7,0,5.6l-0.5,3.2c-0.1,0.6,0.6,1,1,0.5l5.3-5.1
		c0.9-0.8,0.9-2.2,0-3.1l-5.3-5.1C136.1,191.5,135.4,191.8,135.5,192.4z"/>
	<path id="eye_2_" class="st2" d="M159.1,194c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2C158.2,196,159.1,195.1,159.1,194z"
		/>
</g>
<g>
	<path id="body_1_" class="st0" d="M201.2,142.5c4.3,2.8,4.3,8.4,0,11.2c-5.8,3.8-14.6,8.1-24.4,8.1c-17.5,0-31.7-13.7-31.7-13.7
		s14.2-13.7,31.7-13.7C186.7,134.5,195.4,138.7,201.2,142.5z"/>
	<path id="tailfin_1_" class="st1" d="M131.9,132.7l1.3,8.3c0.8,4.7,0.8,9.5,0,14.3l-1.3,8.3c-0.2,1.5,1.6,2.4,2.6,1.4L148,152
		c2.2-2.1,2.2-5.7,0-7.8l-13.4-12.9C133.5,130.3,131.7,131.2,131.9,132.7z"/>
	<path id="fin_1_" class="st1" d="M171.8,142.1l0.5,3.2c0.3,1.9,0.3,3.7,0,5.6l-0.5,3.2c-0.1,0.6,0.6,1,1,0.5l5.3-5.1
		c0.9-0.8,0.9-2.2,0-3.1l-5.3-5.1C172.4,141.1,171.7,141.5,171.8,142.1z"/>
	<path id="eye_1_" class="st2" d="M195.4,143.7c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2
		C194.5,145.7,195.4,144.8,195.4,143.7z"/>
</g>
<g>
	<path id="body" class="st0" d="M260.7,96.2c4.3,2.8,4.3,8.4,0,11.2c-5.8,3.8-14.6,8.1-24.4,8.1c-17.5,0-31.7-13.7-31.7-13.7
		s14.2-13.7,31.7-13.7C246.1,88.1,254.9,92.4,260.7,96.2z"/>
	<path id="tailfin" class="st1" d="M191.4,86.4l1.3,8.3c0.8,4.7,0.8,9.5,0,14.3l-1.3,8.3c-0.2,1.5,1.6,2.4,2.6,1.4l13.4-12.9
		c2.2-2.1,2.2-5.7,0-7.8L194,85C192.9,83.9,191.1,84.9,191.4,86.4z"/>
	<path id="fin" class="st1" d="M231.3,95.7l0.5,3.2c0.3,1.9,0.3,3.7,0,5.6l-0.5,3.2c-0.1,0.6,0.6,1,1,0.5l5.3-5.1
		c0.9-0.8,0.9-2.2,0-3.1l-5.3-5.1C231.9,94.8,231.2,95.2,231.3,95.7z"/>
	<path id="eye" class="st2" d="M254.8,97.3c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2C253.9,99.3,254.8,98.4,254.8,97.3z"/>
</g>
</svg>
body {
   min-height: 100vh;
   width: 100%;
   background: #ddc7f1;
   display: flex;
   align-content: center;
   justify-content: center;
   padding-top: 100px;

}

.octo {
   width: 80%;
   max-width: 400px;
   height: auto;
   padding: 20px;
   z-index: 10;
   position: relative;

   path {
      stroke: #4B384C;
      fill: none;
      stroke-width: 85px;
      stroke-linecap: round;
   }

   #head path {
      fill: #4B384C;
      stroke: none;
   }

   g polyline,
   #tall {
      visibility:hidden;
   }

   #eyeleft,
   #eyeright {
      path.st2 {
         fill: none;
         stroke: #E2A9E5;
         stroke-width: 10;
         stroke-miterlimit: 10;
      }
      path.st3 {
         fill: #E2A9E5;
         visibility: hidden;
      }
   }
}

.st4 {
   fill: #842588;
   animation: pulse 2s ease-in-out infinite alternate;
}

#sidespots .st4 {
   fill: #b406bb;
}

@keyframes pulse {
   from   { opacity:1; }
   to { opacity:0.5; }
}


.wave {
   position: absolute;
   width: 100%;
   height: 100%;
   left:0;
   right:0;
   top:0;
   bottom:0;
   z-index: 1;
}

.wave + .wave {
   z-index: 2;
}

svg.fish {
   width: 300px;
   height: 300px;
   z-index: 1;

   .st0{fill:#882A86;}
	.st1{fill:#4E374E;}
	.st2{fill:#D8A6CD;}
}
View Compiled
var tl = new TimelineMax();
var eyeBob = '#eyeright, #eyeleft, #sidespots';

TweenMax.set(eyeBob, {y: 30})

tl.to("#leg1 path",1, {morphSVG:"#leg1 polyline", repeat:-1, yoyo:true, ease: Sine.easeInOut},0)
tl.to("#leg2 path",1, {morphSVG:"#leg2 polyline", repeat:-1, yoyo:true, ease: Sine.easeInOut},0)
tl.to("#leg3 path",1, {morphSVG:"#leg3 polyline", repeat:-1, yoyo:true, ease: Sine.easeInOut},0)
tl.to("#leg4 path",1, {morphSVG:"#leg4 polyline", repeat:-1, yoyo:true, ease: Sine.easeInOut},0)

tl.to("#head #short",1, {morphSVG:"#head #tall", repeat:-1, yoyo:true, ease: Sine.easeInOut},0)

// tl.to("#eyeleft .st2",1, {morphSVG:"#eyeleft .st3", repeat:-1, yoyo:true, ease: Sine.easeOut},0)

tl.to(eyeBob,1, {y: 0, repeat:-1, yoyo:true, ease: Sine.easeInOut},0)
tl.to('.octo', 1, {y: -50, repeat: -1, yoyo: true, ease: Sine.easeInOut}, 0)

var wave1 = $('#feel-the-wave').wavify({
  height: 80,
  bones: 4,
  amplitude: 60,
  color: 'url(#grad-ucgg-generated)',
  speed: .15
});

var wave2 = $('#feel-the-wave-two').wavify({height: 60, bones: 3, amplitude: 40, color: 'rgba(127, 61, 146, 0.6)', speed: .25});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  4. https://rawgit.com/peacepostman/wavify/master/wavify.js
  5. https://rawgit.com/peacepostman/wavify/master/jquery.wavify.js