:doodle {
--rspeed: @r(28s, 35s);
--angle: @r(1.2deg, 5deg);
--delay: @r(-120ms, -10ms);
--cycle: @r(2s, 6s);
--da: @r(8vmin, 12vmin);
--db: @r(8vmin, 12vmin);
--bg: hsl(210, 51%, 67%);
@grid: 1x880 / 101.8vmin;
will-change: transform;
animation: r var(--rspeed) linear infinite;
}
@place-cell: center;
@size: 100%;
transform: rotate(calc(@calc(@i() - 1) * var(--angle)));
:after {
content: '';
position: aboslute;
@size: 1px 3vmin;
background: var(--bg);
will-change: transform;
animation: w var(--cycle) linear infinite;
animation-delay: calc(@i() * var(--delay));
}
--f: calc(@sin(@i() / 4) * @PI());
@keyframes w {
0 { transform: translateY(calc(var(--da) * var(--f))) }
50% { transform: translateY(calc(var(--db) * var(--f))) }
}
@keyframes r {
to { transform: rotate(@p(-1turn, 1turn)) }
}
