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

water.css

svg {
  background: #000000;
}

.branch {
  stroke: #FFFFFF;
}

.branchNode {
  fill: #FFFFFF;
}

water.js

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var line;
var createBranches;
var trunk;
var trunk_width;
var branches;
var flowers;

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');

createBranches = function(trunk) {
  
  var createLeftBranch = function(parent, angleModifier, lengthModifier, widthModifier) {

    var angle = parent[1].angle + angleModifier;
    var width = parent[1].width * widthModifier;
    var length = parent[1].length * lengthModifier;

    var bit = parent[1].width/2 - ((width/2)/Math.sin(angleModifier + Math.PI/2));
    var radius = Math.sqrt(Math.pow(parent[1].length, 2) + Math.pow(bit, 2));
    
    var initialAngle = (-Math.PI/2 - parent[1].angle - Math.atan(bit/parent[1].length));
    var parent_x = parent[0].x + parent[1].length*Math.cos(initialAngle);
    var parent_y = parent[0].y + parent[1].length*Math.sin(initialAngle);
    
    var branch = [
      { 'x': parent_x, 'y': parent_y },
      {
        'x': parent_x - Math.sin(angle) * length,
        'y': parent_y - Math.cos(angle) * length,
        'angle': angle,
        'width': width,
        'length': length
      }
    ];
    
    return branch;
  };
  
  var createRightBranch = function(parent, angleModifier, lengthModifier, widthModifier) {
    
    var angle = parent[1].angle - angleModifier;
    var width = parent[1].width * widthModifier;
    var length = parent[1].length * lengthModifier;

    var bit = parent[1].width/2 - ((width/2)/Math.sin(angleModifier + Math.PI/2));
    var radius = Math.sqrt(Math.pow(parent[1].length, 2) + Math.pow(bit, 2));
    
    var initialAngle = (-Math.PI/2 - parent[1].angle + Math.atan(bit/parent[1].length));
    var parent_x = parent[0].x + parent[1].length*Math.cos(initialAngle);
    var parent_y = parent[0].y + parent[1].length*Math.sin(initialAngle);
    
    var branch = [
      {
        'x': parent_x,
        'y': parent_y,
        'angle': angle,
        'width': width,
        'length': length
      },
      {
        'x': parent_x - Math.sin(angle) * length,
        'y': parent_y - Math.cos(angle) * length
      },
      {
        'x': parent_x - Math.sin(angle) * length * 2,
        'y': parent_y - Math.cos(angle) * length
      }
    ];
    
    return branch;
  };
  
  var createChildBranches = function(parent) {
    
    var i = 0;
    
    if (parent[1].width > 17.2) {
      var leftBranch = createLeftBranch(parent, 0.7, 0.7, 0.7);
      var rightBranch = createRightBranch(parent, 0.7, 0.7, 0.7);
      
/*      for (i = 0; i < 20; i++) {
        flowers.push(
          {
            'x': leftBranch[0].x - Math.sin(leftBranch[1].angle)
            	* leftBranch[1].length * Math.random(),
            'y': leftBranch[0].y - Math.cos(leftBranch[1].angle)
            	* leftBranch[1].length * Math.random(),
            'r': (4.8)
          },
          {
            'x': rightBranch[0].x - Math.sin(rightBranch[1].angle)
            	* rightBranch[1].length * Math.random(),
            'y': rightBranch[0].y - Math.cos(rightBranch[1].angle)
            	* rightBranch[1].length * Math.random(),
            'r': (4.4)
          }
        );
      }*/
      return [leftBranch, rightBranch];
    }
    else {
      var radius = parent[1].width * 2;
      var angle;
      
/*      for (i = 0; i < Math.floor((Math.random()*20)+1); i++) {
        angle = i + parent[1].angle + Math.PI;
        flowers.push(
          {
            'x': parent[1].x + radius * Math.cos(angle), 
            'y': parent[1].y + radius * Math.sin(angle),
            'r': (parent[1].width * (Math.random()*2))
          }
        );
      }*/
      
      return null;
    }
  };
  
  // create an array that will hold the 'unprocessed' branches
  var unprocessedBranches = [];

  // create an array that will hold the 'processed' branches
  var processedBranches = [];
  
  var parentBranch;
  var childBranches;
  
  // 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);
  }
  
  return processedBranches;
};
 
trunk_width = width/20;
trunk = [
  { 'x': width/2, 'y': height },
  { 'x': width/2, 'y': height - height/5 }
];

trunk[1].length = Math.sqrt(Math.pow(trunk[1].x - trunk[0].x, 2) + Math.pow(trunk[1].y - trunk[0].y, 2));
trunk[1].angle = 0;
trunk[1].width = trunk_width;

flowers = [];
branches = createBranches(trunk);

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

g.selectAll('branchNodes')
  .data(branches)
  .enter().append('circle')
  .attr('cx', function(d) { return d[0].x; } )
  .attr('cy', function(d) { return d[0].y; } )
  .attr('r', function(d) { return d[0].width/2; } )
  .attr('class', function(d) {
    return 'branchNode';
  });

g.selectAll('flowers')
  .data(flowers)
  .enter().append('circle')
  .attr('cx', function(d) { return d.x; } )
  .attr('cy', function(d) { return d.y; } )
  .attr('r', function(d) { return d.r; } )
  .attr('class', function(d) {
    return 'flower-' + Math.floor(Math.random()*4);
  });