JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="pretty">
</div>

CSS

#pretty {
      width: 100%;
      position: absolute;
      z-index: 1;
    background-color:#000;
    }

JavaScript

var wheight = $(window).height() < 700 ? 700 : ( $(window).height() > 1020 ? 1020 : $(window).height() );

$('#pretty').css({'min-height': wheight});

//Position the ellipse in the middle of the container
function setEllipse(width, height, ellipse, $content) {
    if(ellipse === false)
        ellipse = {};
    
    ellipse.height = height;
    ellipse.width = width;

    if(ellipse.top == undefined)
        ellipse.top = $content.height() / 2 - (ellipse.height / 5);

    if(ellipse.left == undefined)
        ellipse.left = $content.width() / 2 ;

    return ellipse;
}
/*
** Bezier border
**
**
** M leftX, leftY C x1, y1 x2, y2 rightX, rightY
** 1. First control point
** 2. Second control point
*/
function bezierPathTopRounded(ellipse, margin) {
	var box = ellipse.paper.getBBox();

	//Left value :
	var leftX = box.x - margin;
	var rightX = box.x + margin + box.width;

	var y = box.y + box.height/2 - margin; //-/+

    var p = "M "+ leftX  + ", "+ y
    + " C "
    + ( box.x - margin + (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5)  ) + " "
    + ( box.x + margin + box.width - (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5) ) + " "
    + rightX +", " + y;

    return p;   
}

/*
**  BorderPath
**
** Set the border path from the ellipse
** @param ellipse => ellipse object
** @param margin
** 
** <path d='M leftX leftY A width,height 0 1 1 rightX,rightY'/>
** (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
*/
function borderPath(ellipse, margin, flag) {
    var flag = flag == undefined ? 1 : 0;

    var box = ellipse.paper.getBBox();

    var leftX = box.x - margin;

	var rightX = box.x + margin + box.width;

	var y = box.y + box.height/2;
	y += (flag == 1) ? -margin : margin;

	var rx = box.width/2 + margin;
	var ry = box.height/2;

    var p = "M "+ leftX + ", "+ y
    + " A "
    + rx + " " + ry
    + " 0 0 "+ flag +" "
    + rightX +", " + y;

    return p;
}


var $content = $('#pretty');

var paper =...