JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>

CSS

path {
   	fill: rgba(0,0,0,0.5);
}

JavaScript

var v1 = [[100,100],[200,100],[200,200],[100,200]],
    v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
	.y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));