- let n = 12;

body(style=`--n: ${n}`)
	- for(let i = 0; i < n; i++)
		.item(style=`--i: ${i}`)
View Compiled
$d: 2em;

.item {
	position: absolute;
	top: 50%; left: 50%;
	margin: -.5*$d;
	width: $d; height: $d;
	border-radius: 50%;
	--az: calc(var(--i)*1turn/var(--n));
	transform: rotate(var(--az)) 
		translate(2*$d) 
		rotate(calc(-1*var(--az)));
	background: silver;
	font: 2em/ 2 trebuchet ms, sans-serif;
	text-align: center;
	counter-reset: i var(--i);
	
	&::before { content: counter(i) }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.