A CodePen by speednos. Octopus - hacked up for the water demo pen, http://codepen.io/gregmcausland/pen/dnzke

indexOctopus.html

<p>hacked up for my <a href="http://codepen.io/gregmcausland/pen/dnzke" target="_top">water demo</a>

script.js

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 400;

document.body.appendChild( canvas );

function Octopus()
{
  this.sections = [];
  this.nSec = 20;
  this.len = 250;
  this.loop = 0;
  this.init = function()
  {
    for (var i=0; i<this.nSec; i++)
    {
      this.sections[i] = 0;
    }
  };
  
  this.render = function()
  {
    ctx.save();
    ctx.translate( 200, 300 );
    
    ctx.save();
    ctx.fillStyle="#afa0b9";
    var step = this.len / this.nSec;
    for (var i=0; i<this.nSec; i++)
    {
      ctx.rotate( this.sections[i] );
      if (i % 3 == 0)
      {
        ctx.beginPath();
        ctx.arc( -(this.nSec-i), -step*i,10 - (i/3), 0, Math.PI*2, true);
        ctx.fill();
      }
    }
    ctx.restore();
    
    ctx.save();
    ctx.fillStyle="#8f8099";
    ctx.beginPath();
    var step = this.len / this.nSec;
    for (var i=0; i<this.nSec; i++)
    {
      ctx.rotate( this.sections[i] );
      ctx.lineTo( -(this.nSec-i), -step*i );
    }

    for (var i=this.nSec-2; i>=0; i--)
    {
      ctx.rotate( -this.sections[i] );
      ctx.lineTo( (this.nSec-i), -step*i );
    }
    ctx.fill();
    ctx.restore();
    
    ctx.restore();    
  };
  
  this.animate = function()
  {
    var i;
    for (i=0; i<this.nSec; i++)
    {
      this.sections[ i ] = Math.sin( (this.loop - (i * (50/ this.nSec))) / 20 ) / this.nSec;
    }
    this.loop = (this.loop + 1) % ( Math.PI * 360 );
  };
  
  this.init();
}

var oc = new Octopus();

function tick()
{
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  oc.animate();
  oc.render();
  webkitRequestAnimationFrame( tick );
}

tick();