:doodle {
@grid: 1x1x100 / 100vmin;
will-change: transform;
animation: r 23s linear infinite;
}
@size: 100% 50%;
position: absolute; top: 25%;
transform: rotate(@r(360deg));
perspective: @r(100px, 200px);
:after {
content: '';
position: absolute;
@size: @r(.5vmin, 5vmin);
color: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);
background: currentColor;
box-shadow: @m2(0 0 1.2vmin currentColor);
will-change: transform;
animation: cycle @r(2s) linear infinite;
--trans:
scaleX(@r(1, 5))
translateZ(@r(10vmin, 20vmin));
transform: rotateY(0) @var(--trans);
}
:empty:after {
color: transparent;
}
@keyframes cycle {
to {
transform:
rotateY(@p(-1turn, 1turn))
@var(--trans);
}
}
@keyframes r {
to { transform: rotate(1turn) }
}