JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ellipse-1">
    <div class="dot"></div>
    <div class="dotted"></div>
</div>
<div class="ellipse-2">
    <div class="dot"></div>
</div>

CSS

html, body{
	margin: 0;
	padding: 20px;
}

.ellipse-1{
	width: 295px;
	height: 393px;
	position: absolute;
	background: url('://s7.hostingkartinok.com/uploads/images/2014/08/7756ca2681dd94e735353e9896f1ff9a.jpg') 0 0 no-repeat;
}

.ellipse-1 .dot, .ellipse-2 .dot{
	background: red;
	border: 2px solid red;
  width: 1px;
  height: 1px;
}

.ellipse-2{
	width: 373px;
	height: 317px;
	position: absolute;
	background: url('http://s7.hostingkartinok.com/uploads/images/2014/08/305774c79ef091462925043b8624af62.jpg') 0 0 no-repeat;
	left: 400px;
}

.ellipse-2 .dot{
	left: 176px;
	top: 148px;
}

JavaScript

$(document).ready(function(){

	//Ellipse 1
	//X and Y - center
	var X = 137,
	Y = 186,
	//Radius
	R = 147,
	ANGLE = 0;

	setInterval(function(){

		X1 = X + R * Math.sin(ANGLE);
		Y1 = Y + 1.3 * R * Math.cos(ANGLE);
		
		$(".ellipse-1 .dot").css({left: X1 + "px", top: Y1 + "px"});
    $(".ellipse-1").css({left: X1 + "px", top: Y1 + "px"});
		ANGLE += 0.02;
		
	}, 30);
	//Ellipse 1

	//Ellipse 2 ????

});