:doodle {
@grid: 5 x 2;
}
width: 30vmin;
height: 30vmin;
--colorMain: rgb(@r(255), @r(255), @r(255));
--colorSub: rgb(@r(255), @r(255), @r(255));
position: relative;
box-sizing: border-box;
margin: 1vmin;
border-radius: 50%;
border:2px solid #666;
box-shadow: 1px 1px 4px 2px #222;
// background: conic-gradient(from @r(360)deg, var(--colorMain), transparent, var(--colorSub), transparent, var(--colorMain));
background: var(--colorMain);
overflow: hidden;
:after {
--angle: calc(360deg / @index);
--start: @r(8, 30)px;
--end: @r(24, 80)px;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(@r(360)deg, var(--colorMain), var(--colorSub), var(--colorMain));
mask: @m(@index, (
repeating-linear-gradient(calc(var(--angle) * @n), #fff 0, #fff var(--start), transparent var(--start), transparent var(--end))
));
-webkit-mask-composite: xor;
}