:doodle {
@grid: 80x1 / 100vw 100vh;
@min-size: 100px;
filter: url(#filter);
will-change: transform;
animation: r 23s linear infinite;
}
@size: 100% 50%;
position: absolute;
top: 25%;
transform: rotate(@r(360deg));
perspective: 130px;
:after {
content: '';
position: absolute;
@size: @r(10px);
will-change: transform;
animation: cycle @r(2s, 8s) linear infinite;
animation-delay: -@r(100s);
background: #fff8;
box-shadow: @m3(0 0 calc(.5vmin + 5px) #fff);
--trans: scaleX(@r(.1, 5)) translateZ(105px);
transform: rotateY(0) @var(--trans);
}
@keyframes cycle {
to {
transform: rotateY(@p(-1turn, 1turn)) @var(--trans);
}
}
@keyframes r {
to { transform: rotate(@p(-1turn, 1turn)) }
}