Convert UL list to radial

Question

I’m trying to turn an image infographic into something editable in HTML/JS/CSS.

I’d like to bring it as close to the image as possible. I need you to be flexible enough that you don’t need to pass coordinates via the CSS of each item, so it’s editable via admin (add/remove).

The closest I could was using Tweenmax through an example I picked up on the internet. But, I can’t get out of it. My biggest doubt is how to position the text according to the area where it is (if the circle is on the right, align the title on the right, if it is on the left, do the same aligning on the left).

function radiallist(trgt) {
  		var itemAmount = $(trgt).find('.radiallist-item').length;
  		var angle = 0,
    		currItem;
  		var itemStartDist = trgt.width() * 2;
		for (i = 0; i < itemAmount; i++) {
			currItem = $(trgt).find('.radiallist-item:nth-child(' + (i + 1) + ')');
			angle = (Math.PI * 2 / itemAmount) * i;
			x = itemStartDist * Math.cos(angle) - (currItem.width() / 2);
			y = itemStartDist * Math.sin(angle) - (currItem.height() / 2);
			TweenMax.to(currItem, 0, {
				x: x,
				y: y
			});
		}
  		radiallistItemPos($('.radiallist'));
	}
	radiallist($('.radiallist'));

	function radiallistItemPos(trgt) {
		var itemAmount = $(trgt).find('.radiallist-item').length;
		var angle = 0,
		currItem;
		var itemEndDist = 100 * itemAmount/8;
		for (i = 0; i < itemAmount; i++) {
			currItem = $(trgt).find('.radiallist-item:nth-child(' + (i + 1) + ')');
			angle = (Math.PI * 2 / itemAmount) * i;
			x = itemEndDist * Math.cos(angle) - (currItem.width() / 2);
			y = itemEndDist * Math.sin(angle) - (currItem.height() / 2);
			TweenMax.to(currItem, 2, {
				x: x,
				y: y,
				alpha: 1
			});
		}
	}

.radiallist {
		position:absolute;
		height:100%;
		width:100%;
		top:0;
		left:0;
		overflow:hidden;
	}
	.radiallist .radiallist-btn {
		position:relative;
		height:330px;
		width:330px;
		left:50%;
		top:50%;
		margin-top:-165px;
		margin-left:-165px;
		z-index:2;
		text-align:center;
		border:3px dotted #CCC;
		border-radius:165px;
	}
	.radiallist .radiallist-btn img {
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-107px;
		margin-top:-31px;
	}
	.radiallist .radiallist-items {
		position:absolute;
		left: 50%;
		top: 50%;
		margin:0;
		list-style-type:none;
		padding:0;
	}
	.radiallist .radiallist-item {
		position:absolute;
		background:url(https://i.imgur.com/LMgR3Pe.png) no-repeat center;
		z-index:1;
		text-align:right;
		font-family:'Din';
		font-size:14px;
		color:#777;
		font-weight:bold;
		text-transform:uppercase;
		white-space:nowrap;
	}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></script>
<script defer src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script defer src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section id="conteudo">
	<div class="container">
		<div class="radiallist">
			<div class="radiallist-btn"></div>
			<ul class="radiallist-items">
				<li class="radiallist-item">Televisões</li>
				<li class="radiallist-item">Telas Touch</li>
				<li class="radiallist-item">Notebooks</li>
				<li class="radiallist-item">Tablets</li>
				<li class="radiallist-item">Impressoras</li>
				<li class="radiallist-item">Estruturas Box Truss</li>
				<li class="radiallist-item">Backdrops</li>
				<li class="radiallist-item">Palcos</li>
				<li class="radiallist-item">Caixas de som</li>
				<li class="radiallist-item">Microfones</li>
				<li class="radiallist-item">Iluminação</li>
				<li class="radiallist-item">Filmadoras</li>
				<li class="radiallist-item">Máquinas fotográficas</li>
				<li class="radiallist-item">Climatizadores</li>
				<li class="radiallist-item">Rádios</li>
				<li class="radiallist-item">Totens Carregadores</li>
				<li class="radiallist-item">Tendas</li>
				<li class="radiallist-item">Geradores de Energia</li>
				<li class="radiallist-item">Vídeo-games</li>
				<li class="radiallist-item">Equipamentos para transmissão</li>
				<li class="radiallist-item">Unifilas</li>
				<li class="radiallist-item">Pulpitos</li>
				<li class="radiallist-item">Máquinas de neve</li>
				<li class="radiallist-item">Máquinas de fumaça</li>
				<li class="radiallist-item">Máquinas de gelo seco</li>
				<li class="radiallist-item">Projetores</li>
			</ul>
		</div>
	</div>
</section>

Can someone shed some light on that?