JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"></div>

CSS

svg { 
    border:1px dotted #000; 
}

JavaScript

var width = 450,
   height = 400


    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(108,255,108,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(30deg)')
.style("transform-origin", "50% 50%");


svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(168,255,168,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(70deg)')
.style("transform-origin", "50% 50%");

svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(148,255,148,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(110deg)')
.style("transform-origin", "50% 50%");

svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(128,255,128,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(140deg)')
.style("transform-origin", "50% 50%");