created by livecoding - http://livecoding.io/3184496

options.json

{"libraries":["d3"]}

water.css

svg {
  background: #000000;
  width: 100%;
  height: 100%;
  position: absolute;
}

rect {
  fill: #FFFFFF;
  stroke: #FFFFFF;
/*  shape-rendering: crispEdges;*/
}

circle {
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

water.html

<svg></svg>

water.js

var degreesToRadians;
var createLeftBranch;
var createRightBranch;
var createLeftAndRightBranches;
var svgWidth;
var svgHeight;
var svg;
var trunkWidth;
var trunkHeight;
var trunk;
var childLeftBranch;
var childRightBranch;
var unprocessedBranches;
var processedBranches;
var parentBranch;
var childBranches;

degreesToRadians = function(degrees) {
  return degrees * (2*Math.PI)/360;
};

svgWidth = $('svg').width();
svgHeight = $('svg').height();
svg = d3.select('svg');

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

trunkWidth = 40;
trunkHeight = 190;

trunk = {
  "width": trunkWidth,
  "height": trunkHeight,
  "x": svgWidth/2 - trunkWidth/2,
  "y": svgHeight - trunkHeight - 100,
  "angle": 0,
  "rotation_x": null,
  "rotation_y": null,
  "computed_top_left_x": null,
  "computed_top_left_y": null
};

trunk.rotation_x = trunk.x;
trunk.rotation_y = trunk.y + trunk.height;
trunk.computed_top_left_x = trunk.rotation_x + trunk.height*Math.cos(degreesToRadians(trunk.angle - 90));
trunk.computed_top_left_y = trunk.rotation_y + trunk.height*Math.sin(degreesToRadians(trunk.angle - 90));
trunk.computed_top_right_x = (trunk.rotation_x + trunk.width) + trunk.height*Math.cos(degreesToRadians(trunk.angle - 90));
trunk.computed_top_right_y = trunk.rotation_y + trunk.height*Math.sin(degreesToRadians(trunk.angle - 90));

createLeftBranch = function(parent, masterAngle) {
  
  var angle = masterAngle || 90;
  
  var branch = {
    "width": null,
    "height": null,
    "x": null,
    "y": null,
    "angle": -angle + parent.angle,
    "rotation_x": null,
    "rotation_y": null,
    "computed_top_left_x": null,
    "computed_top_left_y": null,
    "computed_top_right_x": null,
    "computed_top_right_y": null
  };
  
  branch.width = parent.width * 0.70;
  branch.height = parent.height * 0.70;
  
  branch.x = parent.computed_top_left_x;
  branch.y = parent.computed_top_left_y - branch.height + 0;
  
  branch.rotation_x = branch.x;
  branch.rotation_y = branch.y + branch.height;
  
  branch.computed_top_left_x = branch.rotation_x + ((branch.height) * Math.cos(degreesToRadians(branch.angle - 90)));
  branch.computed_top_left_y = branch.rotation_y + ((branch.height) * Math.sin(degreesToRadians(branch.angle - 90)));
  
  var diagonal = Math.sqrt(Math.pow(branch.height, 2) + Math.pow(branch.width, 2));
  var diagonalAngle = degreesToRadians(branch.angle) - Math.atan(branch.height/branch.width);
  
  branch.computed_top_right_x = branch.rotation_x + (diagonal * Math.cos(diagonalAngle));
  branch.computed_top_right_y = branch.rotation_y + (diagonal * Math.sin(diagonalAngle));
  
  return branch;
  
};

createRightBranch = function(parent, masterAngle) {
  
  var angle = masterAngle || 90;
  
  var branch = {
    "width": null,
    "height": null,
    "x": null,
    "y": null,
    "angle": angle + parent.angle,
    "rotation_x": null,
    "rotation_y": null,
    "computed_top_left_x": null,
    "computed_top_left_y": null,
    "computed_top_right_x": null,
    "computed_top_right_y": null
  };
  
  branch.width = parent.width * 0.70;
  branch.height = parent.height * 0.70;
  
  branch.x = parent.computed_top_right_x - branch.width;
  branch.y = parent.computed_top_right_y - branch.height;
  
  branch.rotation_x = branch.x + branch.width;
  branch.rotation_y = parent.computed_top_right_y;
  
  branch.computed_top_right_x = branch.rotation_x + (branch.height * Math.cos(degreesToRadians(branch.angle - 90)));
  branch.computed_top_right_y = branch.rotation_y + (branch.height * Math.sin(degreesToRadians(branch.angle - 90)));
  
  var diagonal = Math.sqrt(Math.pow(branch.height, 2) + Math.pow(branch.width, 2));
  var diagonalAngle = degreesToRadians(branch.angle) - (Math.PI/2 + Math.atan(branch.width/branch.height));
  
  branch.computed_top_left_x = branch.rotation_x + (diagonal * Math.cos(diagonalAngle));
  branch.computed_top_left_y = branch.rotation_y + (diagonal * Math.sin(diagonalAngle));
  
  return branch;
  
};

createChildBranches = function(parent) {
  
  var angle = 180;
  
  if (parent.width > 5) {
    return [
      createLeftBranch(parent, angle), 
      createRightBranch(parent, angle)];
  }
  else {
    return null;
  }
};

processedBranches = [];
processedBranches.push(trunk);

childBranches = createChildBranches(trunk);
processedBranches.push(childBranches[0]);
processedBranches.push(childBranches[1]);

// create an array that will hold the 'unprocessed' branches
unprocessedBranches = [];

// create an array that will hold the 'processed' branches
processedBranches = [];

// put trunk in unprocessed
unprocessedBranches.push(trunk);

// while unprocessed is not empty
while (unprocessedBranches.length > 0) {
  
  // pop an element from unprocessed
  parentBranch = unprocessedBranches.pop();
  
  // create child branches from the parent branch
  childBranches = createChildBranches(parentBranch);
  
  // put child branches in unprocessed
  if (childBranches) {
    unprocessedBranches.push(childBranches[0]);
    unprocessedBranches.push(childBranches[1]);
  }
  
  // put parent branch in processed
  processedBranches.push(parentBranch);
}

svg.selectAll('rect')
  .data(processedBranches)
  .enter().append('rect')
  .attr('x', function(d) { return d.x; })
  .attr('y', function(d) { return d.y; })
  .attr('height', function(d) { return d.height; })
  .attr('width', function(d) { return d.width; })
  .attr('transform', function(d) {
    return 'rotate(' 
      + d.angle + ', ' 
      + d.rotation_x + ', ' 
      + d.rotation_y + ')';
  });