created by livecoding - http://livecoding.gabrielflor.it/3219506

water.css

svg {
  background: #000000;
}

path.branch {
  stroke: #FFFFFF;
}

water.js

var svg_width = $('svg').width();
var svg_height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var line;
var createTrunk;
var createLeftBranch;
var createBranches;
var branches;

svg
  .attr('width', svg_width)
  .attr('height', svg_height);

line = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('basis');

createTrunk = function() {
  
  var bend = 0;
  var width = 10;
  var length = 100;
  
  var trunk = [];
  trunk.push({
    'x': svg_width/2,
    'y': svg_height,
    'width': width,
    'length': length
  });
  
  trunk.push({
    'x': svg_width/2,
    'y': svg_height
  });
  
  return trunk;
};

createLeftBranch = function(parent) {
  
  var angle = Math.PI/10;
  var branch = [];
  
  branch.push({
    'x': _.last(parent).x,
    'y': _.last(parent).y,
    'width': 10
  });
  
  branch.push({
    'x': 0,
    'y': 0
  });
  

  branch.push({
    'x': 0,
    'y': 0
  });
  
  return branch;
};

createBranches = function() {
  
  var trunk = createTrunk();
  var branches = [];
  branches.push(trunk);
  
  var leftBranch = trunk;
  
  for (var i = 0; i < 1; i++) {
//    leftBranch = createLeftBranch(leftBranch);
//    branches.push(leftBranch);
  }
  
  return branches;
};

branches = createBranches();

g.selectAll('branches')
  .data(branches)
  .enter().append('path')
  .attr('d', line)
  .style('stroke-width', function(d) { return d[0].width; })
  .attr('class', 'branch');