:doodle {
@grid: 5x1;
@size: 300px 600px;
}
:container {
grid-template-rows: 4fr 1fr 1fr 1fr 1fr;
position: relative;
clip-path: circle(146px at 150px 150px)
}
background: hsla(@rand(250, 300), 70%, 70%, 1);
@nth(1) {
@shape: circle;
position: relative;
z-index: 1;
}
@nth(2,3,4,5) {
@size: 80% 10%;
@place-cell: -100% calc(((@index() - 2) * (25% / 2)) + @rand(0, 12.5%));
z-index: 2;
border-radius: 11% / 50%;
opacity: @rand(0.6, 0.85);
animation: doodleSlide 9s linear infinite;
animation-delay: @rand(-3s, 3s);
animation-duration: @rand(7s, 15s);
background: hsla(@rand(0, 200), 70%, 70%, 1);
}
@keyframes doodleSlide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(calc(300% + 200px), 0, 0);
}
}