<ul class="badges">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
.badges {
	position: relative;
  width: 50px;
  height: 50px;
  margin: 50px;
}

.badges>li {
	position: absolute;
	top: 32%; left: 32%;
  width: 20px;
  height: 20px;
  background: teal;
  border-radius: 50%;
  list-style: none;
}
document.querySelectorAll( '.badges' ).forEach( ( ciclegraph )=>{
  let circles = ciclegraph.querySelectorAll( 'li' )
  let angle = 360-90, dangle = 360 / circles.length
  for( let i = 0; i < circles.length; ++i ){
    let circle = circles[i]
    angle += dangle
    circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.