JSFiddle - React, Tailwind, and code Playground

by danielugalde

HTML

<div id="b123" class="circle">
  <div class="label"></div>
  <div class="ci">
    <div class="hijo">0</div>
    <div class="hijo">1</div>
    <div class="hijo">2</div>
    <div class="hijo">3</div>
    <div class="hijo">4</div>
    <div class="hijo">5</div>
    <div class="hijo">6</div>
    <div class="hijo">7</div>
    <div class="hijo">8</div>
  </div>
</div>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}
.circle {
  border: 5px solid #f5df7c;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: #333;
  position: relative;
}
.circle .label {
  width: 50px;
  height: 50px;
  background: #f00;
  border-radius: 50%;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
}
.circle .hijo {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  font-size: 8px;
  padding: 3px;
  text-align: center;
}

JavaScript

calculatePositions('123');
function calculatePositions(containerId){
	
	var bigCircleId = "#b"+containerId + ' .ci';
	var radius 		= 80 - 15 -5 ; //outer circle radius - result circle radius - offset
	var num    		= $(bigCircleId).children().length;
	var dividers  	= 360/num;
	var center 		= 70; // radius of middle circle + 5(offset)
	var theta       = 0.0;
	var radians = dividers * (Math.PI / 180);
	
	for(var i=0;i<num;i++){
		
		var x = Math.round(center+radius*Math.cos(theta));
		var y = Math.round(center+radius*Math.sin(theta));
		
		$(bigCircleId+" :nth-child("+(i+1)+")").css({'left':x,'top':y});
    //console.log({'left':x,'top':y});
		
		theta +=  radians;
	}
	
}