:doodle {
@grid: 1x48 / 100%;
}
@place-cell: center;
@size: calc(@i() * 2%);
border-radius: 10%;
border-style:dotted;
@nth(5n) {
border-style:dashed;
}
border-width: calc(@i() * 3px);
border-color: hsla(
calc(14*@i()), 100%, 50%,
calc(3 / @i() * .8)
);
transform: rotate(@r(360deg));
@even() {animation:spin 6s ease-out forwards;}
@odd() {animation:counterspin 6s ease-out forwards;}
@keyframes spin {
100% {transform: rotate(calc(360deg*20));}
}
@keyframes counterspin {
100% {transform: rotate(calc(-360deg*20));}
}