raindrops

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>Arbitrary Visualization</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
  
    <style type="text/css">
        html, body {
            height: 100%;
        }

body {
            margin: 0;
        }

svg {
            width: 100%;
            height: 100%;
        }

.bubble {
            stroke: grey;
            stroke-width: 1;
        }
    </style>
</head>

<body>

var force = d3.forceSimulation()
                    .velocityDecay(0.8)
                    .alphaDecay(0)
                    .force("charge", d3.forceManyBody().strength(-50).distanceMax(h / 4))
                    .force("collision", d3.forceCollide(r + 0.5).strength(1))
                    .force("position", d3.forceY(h / 2));

var duration = 60000;

var svg = d3.select("svg")
                .attr("width", w)
                .attr("height", h);

var line = d3.line() // <-A
            .curve(d3.curveBasisClosed)
            .x(function(d){return d.x;})
            .y(function(d){return d.y;});

force.on("tick", function () {
        svg.selectAll("path")
            .attr("d", line);
    });

function offset() {
        return Math.random() * 100;
    }

function createNodes(point) {
        var numberOfNodes = Math.round(Math.random() * 10);
        var newNodes = [];

for (var i = 0; i < numberOfNodes; ++i) {
            newNodes.push({
                x: point[0] + offset(),
                y: point[1] + offset()
            });
        }

newNodes.forEach(function(e){nodes.push(e)});

return newNodes;
    }

newLinks.forEach(function(e){links.push(e)});

return newLinks;
    }

svg.on("click", function () {
        var point = d3.mouse(this),
                newNodes = createNodes(point),
                newLinks = createLinks(newNodes);

console.log(point);

svg.append("path")
                .data([newNodes])
            .attr("class", "bubble")
            .attr("fill", "url(#gradient)") // <-B
            .attr("d", function(d){return line(d);}) // <-C
                .transition().delay(duration)
            .attr("fill-opacity", 0)
            .attr("stroke-opacity", 0)
            .on("end", function(){d3.select(this).remove();});

force.nodes(nodes);
        force.force("link", d3.forceLink(links).strength(1).distance(20));
        force.restart();
    });
</script>

</body>

</html>

https://d3js.org/d3.v4.min.js