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

water.css

svg {
  position: absolute;
}

water.html

<svg></svg>

water.js

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

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

svg.selectAll('circle')
  .data([18])
  .enter().append('circle')
  .attr('cy', 236)
  .attr('cx', String)
  .attr('r', Math.sqrt);

svg.selectAll('rect')
  .data([200])
  .enter().append('rect')
  .attr('x', String)
  .attr('y', 273.5)
  .attr('width', 123)
  .attr('height', 123)
  .style('fill', 'none')
  .style('stroke', '#000000');