Q:

circulo com varias barras com jquery e css

eu to tentando criar um circulo com barras dentro que acompanha a borda do circulo, eu estou a horas quebrando cabeça com isso.
Aqui tem o código que eu levei o dia todo pra fazer, mas ainda não é isso,

$(function(){
  var left = 50, 
   rotate = 0,
   top = 0,
   tX = 0,
   tY = 100;
  for (var i = 0; i <= 32; i++) {
   var li = $('<li>',{class:'bar_'+i});
   li.css({
    'left': left+'%',
    'top': '0',
    'transform': "translateY(-"+tY+"%) translateX("+tX+"px) rotate("+rotate+"deg)",
    'margin-top':top
   });
   top +=  5.46875;
   rotate += 2.8125;
   left += 1.5625;
   tX += 1.5625;
   tY -= 1.5625;
   $('.circle').append(li);
  }

 })
ul.circle { width: 310px; height: 350px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #aaa;
 border-radius: 100%; }
 ul.circle li { position: absolute; width: 3px; height: 100px; background-color: #60f; list-style: none; box-sizing: border-box;
 border: none; margin-left: -1.5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="circle">   
   
</ul>

Aqui o código
Eu quero que a barra roxa siga a borda do circulo ... ta tentei de tudo, até pensei em fazer tudo só no css, mas eu vou utilizar 128 barras dessa, então estilizar 128 barras n vai da certo kkk, fico no aguardo, abraço!

A:

Você pode conseguir o efeito usando transform-origin: bottom; e um pseudo-elemento.
Suponhamos que tenha apenas 1 barra no círculo, com altura de metade do raio + 2%, totalizando 52% (os 2% será o excesso que irá ficar fora do círculo) posicionado no meio com a ponta de baixo saindo do centro:

Gerar as várias barras fazendo a inclinação pela ponta de baixo:

Você conseguirá obter o efeito. Porém não use ul nem li para isso. Esses elementos possuem um espaçamento padrão que irá atrapalhar. Mesmo você podendo eliminar esses espaçamentos pelo CSS, é desnecessário. Use div e span, seu código vai ficar muito mais limpo e preciso.
Outro ponto é que você precisará de 128 barras para completar o círculo com a rotação especificada no jQuery.
Veja:

$(function(){
   var rotate = 0;
   for (var i = 0; i <= 128; i++) {
      var li = $('<span>',{class:'bar_'+i});
      li.css('transform','rotate('+rotate+'deg)');
      rotate += 2.8125;
      $('.circle').append(li);
   }
})
div.circle {
   width: 350px;
   height: 350px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

div.circle::after {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #aaa;
 border-radius: 100%;
}

div.circle span {
   position: absolute;
   width: 3px;
   height: 52%;
   background-color: #60f;
   left: 50%;
   margin-left: -1.5px;
   transform-origin: bottom;
   top: -2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
</div>

