svg-drag

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.active {
	stroke: #000;
	stroke-width: 2px;
}

</style>
<svg width="960" height="500">
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 32;

var circles = d3.range(20).map(function() {
	return {
		x: Math.round(Math.random() * (width - radius * 2) + radius),
		y: Math.round(Math.random() * (height - radius * 2) + radius)
	};
});

var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooeyCodeFilter');
     filter.append('feGaussianBlur')
        .attr('in','SourceGraphic')
        .attr('stdDeviation','12')
        .attr('color-interpolation-filters','sRGB')
        .attr('result','blur');
    filter.append('feColorMatrix')
        .attr('in','blur')
        .attr('mode','matrix')
        .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
        .attr('result','gooey');

var color = d3.scaleOrdinal()
    .range(["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]);

function dragstarted(d) {
	d3.select(this).transition();
	d3.select(this).raise().classed("active", true);
}

function dragged(d) {
	d3.select(this)
		.attr("cx", d.x = d3.mouse(this)[0])
		.attr("cy", d.y = d3.mouse(this)[1]);
}

function dragended(d) {
	d3.select(this)
		.classed("active", false)
		.transition()
			.duration(2500)
			.on("start", reposition);
}

</script>

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