<style>
#mydiv {
	margin: 30px;
	width: 200px;
	height: 200px;
	border: 2px dotted purple;
	border-radius: 50%;
	position: relative;
	display: grid;
	place-items: center;
	--size: 30px;
	--borderRadius: 0 50%;
	--mnColor: rgba(0,100,0,.75);
}
li-zi {
	position: absolute;
	width: var(--size);
	height: var(--size);
	border-radius: var(--borderRadius);
}
</style>

<div id="mydiv"></div>

<script>

let total = 15;

Array.from({length: total}).forEach( (item,key) => {
	let cc = '#' + Math.random().toString(16).substr(-6);
	item = document.createElement('li-zi');
	item.style.cssText += `
		background: ${cc};
		transform: rotate(${360 / total * key}deg) translateY(100px);
		box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
	`;
	mydiv.appendChild(item);
});

</script>