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

water.css

svg {
  background: #000000;
}

path {
  stroke: #FFFFFF;
}

water.js

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var branches = [];
var line;
var trunk;
var createLeftBranch;

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

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

trunk = [
  { 'x': width/2, 'y': height },
  { 'x': width/2, 'y': height - 100 }
];

branches.push(trunk);

createLeftBranch = function(parent) {
  
  var angle_degrees = 10;
  var branch = [
    { 'x': parent[1].x, 'y': parent[1].y },
    { 'x': 0, 'y': 10 }
  ];
  
  return branch;

};

branches.push(createLeftBranch(trunk));

g.selectAll('path')
  .data(branches)
  .enter().append('path')
  .attr('d', line)
  .style('stroke-width', 10);