:doodle {
size: 100vmin;
perspective: 300px;
}
clip-path: @shape(fish);
will-change: transform;
background: hsla(
calc(320 + @index() * 2), 80%, 60%,
@rand(.1, .8)
);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: @rand(5s, 16s, .1);
--tz: @rand(10vmax, 80vmax);
--rt: @rand(120deg, 220deg);
@odd {
animation-name: r-odd;
transform: rotateY(0) translateZ(var(--tz));
}
@even {
animation-name: r-even;
transform:
rotateZ(var(--rt)) rotateY(0)
translateZ(var(--tz));
}
@keyframes r-odd {
to { transform:
rotateY(1turn) translateZ(var(--tz));
}
}
@keyframes r-even {
to { transform:
rotateZ(var(--rt)) rotateY(1turn)
translateZ(var(--tz));
}
}