JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="board">
    <svg>
        <g id="selects"></g>
    </svg>
</div>

CSS

body {
    margin:0;    
}

circle {
	fill:red;
    stroke:#888888;
    stroke-width:2;
    cursor:move;
}

path {
	stroke-width: 4px;
	stroke: rgba(0,0,0,1);
    fill: none;
}

JavaScript

// Drag behaviour for a pen
var dragPen = d3.behavior.drag()
	.origin(Object)
	.on("dragstart", beginLine)
	.on("drag", updateLine)
	.on("dragend", endLine);

// selection object
var sel = {};
sel.path = "";

function initPen(sel){
	var x = d3.event.x,
		y = d3.event.y;		
    d3.select("g#selects").append("circle")
        .attr("id", "pen")
        .attr("r", 10)
        .attr("cx", x)
        .attr("cy", y)
        .call(dragPen);

	$("circle#pen").trigger("dragstart");
}

function beginLine(){
    var pos = d3.mouse(this);	
	sel.path = sel.path + "M " + pos[0] + "," + pos[1];
	d3.select("g#selects").append("path")
		.attr("d", sel.path);

}
function updateLine(){
	var pos = d3.mouse(this);
	
	d3.select("g#selects circle#pen")
		.attr("cx", pos[0])
	    .attr("cy", pos[1]);
	
	sel.path = sel.path + "L " + pos[0] + "," + pos[1];
	d3.select("g#selects path")
		.attr("d", sel.path);

}
function endLine(){
	d3.select("g#selects path")
		.attr("d", sel.path)
		.transition()
		.delay(1000)
		.duration(400)
		.style("opacity", 0)
		.remove();
    sel.path = "";
    d3.selectAll("circle").remove();
}

d3.select("#board")
    .on("mousedown", initPen);