JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="circle">			
			
</ul>

CSS

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;  }

JavaScript

$(function(){
		var left = 50, 
			rotate = 0,
			top = 0,
			tX = 0,
			tY = 100;
		for (var i = 0; i <= 20; 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 += 4.5625;
			tY += 4.5625;
			$('.circle').append(li);
		}

	})