- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.