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;   
}

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

var paper = Raphael("pretty",'100%', wheight); //Content paper positioning

$(paper.canvas).attr("id","pretty-svg");

var ellipse = setEllipse(270, 175, false, $content); 
//var ellipse = setEllipse(44, 31.5, false, $content);

var hider = setEllipse(280,185, false, $content);
//var hider = setEllipse(54, 41.5, false, $content);

hider.paper = paper.ellipse(hider.left, hider.top + 2, hider.width, hider.height); //+2 or it's not centered
hider.paper.attr({'fill':'red', 'stroke-width':0});

//Draw ellipse after hider
ellipse.paper = paper.ellipse(ellipse.left, ellipse.top, ellipse.width, ellipse.height);
ellipse.paper.attr({'fill': 'blue', 'stroke-width':0});


/*Drawing some points for research purpose*/
var box =...