:doodle {
@grid: 1x300 / 100vw 25vmin;
padding: 1em 1em 0;
overflow: hidden;
background: linear-gradient(
rgba(2, 104, 157, 0),
#7da5bf2 20%
);
}
align-self: flex-end;
--h: @r(10, 80, .1);
@random(.1) {
--h: @r(85, 102, .1);
}
@size: 1px calc(var(--h) * 1%);
background: linear-gradient(
transparent,
rgba(255, 255, 255, .4),
transparent
);
background-size: .5px 100%;
transform-origin: center 100%;
transform:
translate(@r(-2vmin, 2vmin, .01), 10%)
rotate(@r(-2deg, 2deg, .01));
:after {
content: '';
position: absolute;
top: 0;
@size: calc(2px * var(--h));
transform: translateY(-50%) scale(.14);
background: radial-gradient(
@p(#7da5bf, #014162, #fffa) @r(40%),
transparent 50%
)
50% 50% / @r(100%) @lr()
no-repeat;
}