JSFiddle - React, Tailwind, and code Playground

by Arif Reza

HTML

<div class="xox"></div>
<div class="yoy"></div>
<div class="o_o">
	<div class="point1"></div>
	<div class="point2"></div>
	<script>
		function circle(C,r){
			/********
			This Function Takes:-
			  ____________________________
			  |	Argument	|	Type	 |
			  """"""""""""""""""""""""""""
			  |	C			|	Array(2) |
			  |	r			|	Number	 |
			  """"""""""""""""""""""""""""
			This Function Returns:-
			  A circle with C as centre and r as radius
			********/
			var h=C[0], k=C[1];
			document.write("<div class='point' style='left:"+h+"px;bottom:"+k+"px;'>C("+h+","+k+")</div>");
			
			for (i=(h-r);i<=(h+r);i++){
				x=i;
				y=k+Math.sqrt((2*h*x)+(r*r)-(x*x)-(h*h));
				document.write("<div class='point' style='left:"+x+"px;bottom:"+y+"px;'></div>");
			}
			for (i=(h-r);i<=(h+r);i++){
				x=i;
				y=k-Math.sqrt((2*h*x)+(r*r)-(x*x)-(h*h));
				document.write("<div class='point' style='left:"+x+"px;bottom:"+y+"px;'></div>");
			}
			for (i=(k-r);i<=(k+r);i++){
				y=i;
				x=h+Math.sqrt((2*k*y)+(r*r)-(y*y)-(k*k));
				document.write("<div class='point' style='left:"+x+"px;bottom:"+y+"px;'></div>");
			}
			for (i=(k-r);i<=(k+r);i++){
				y=i;
				x=h-Math.sqrt((2*k*y)+(r*r)-(y*y)-(k*k));
				document.write("<div class='point' style='left:"+x+"px;bottom:"+y+"px;'></div>");
			}
		}
		
		circle([40,40],100);
	</script>
</div>

CSS

/* Resize Margin and Paddding */
* {margin:0px;padding:0px;}

/* Let's draw the X'OX axis */
.xox {
position:absolute;
width:500px;
left:15px;
top:200px;
height:1px;
background:black;
}
.xox:before {
content:"X'";
position:relative;
top:-7px;
left:-15px;
}
.xox:after {
content:"X";
position:relative;
top:-7px;
left:490px;
}

/* And the Y'OY axis */
.yoy {
position:absolute;
width:1px;
height:500px;
background:black;
left:200px;
top:20px;
}
.yoy:before {
content:"Y";
position:relative;
top:-20px;
left:-5px;
}
.yoy:after {
content:"Y'";
position:relative;
top:500px;
left:-17px;
}

/* The O(0,0) point */
.o_o {
position:absolute;
left:200px;
top:200px;
background:white;
width:1px;
height:1px;
}

/* Default Points */
.point {
position:absolute;
background:black;
width:2px;
height:2px;
}