README.md

View this code at http://livecoding.io/5124074

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "sketchpad mode",
    "resolution": "reset"
}

water.css

svg {
  background: #111126;
  position: absolute;
}

circle {
  fill: none;
  opacity: .7;
}

water.html

<svg></svg>

water.js

var w = $('svg').width(),
    h = $('svg').height(),
    i = 0;

var svg = d3.select('svg')
    .attr("width", w)
    .attr("height", h)
    .style("pointer-events", "all");

var int = setInterval(function() {
  var x = Math.random() * w, 
      y = Math.random() * h;
  [0, 1, 2, 3].forEach(function(i) {
    setTimeout(function() {
      particle(x, y, 1 - (i*2/10));
    }, i * 650);
  });
}, 500);

function particle(x, y, op) {
  var p = svg.append("svg:circle");
  p.attr("cx", x)
    .attr("cy", y)
    .attr("r", 1e-6)
    .style("stroke", "#fff")
    .style("stroke-width", 1e-6)
    .style("stroke-opacity", op);
  p.transition()
    .duration(3000)
    .ease(Math.tan)
    .attr("r", 100)
    .style("stroke-opacity", 1e-6)
    .style("stroke-width", 2)
    .remove();
}