@grid: 40x1 / 800px 600px / #281f1a @pattern(
fill: #f4f9fb, .15 * step(.97, rand(floor(pos*520)));
);
@place: @plot.penrose(r: 1.35);
@size: @r(26%, 48%) auto 1;
filter: drop-shadow(.9vmin 1.3vmin 1vmin #0009);
--turn: @r(360deg);
--kind: @pd(1, 1, 2);
--lobes: @p(kind: @p(6 x2, 7), 1);
--blade: (shape {
points: 160;
u: acos(sin(t));
s: abs(sin($lobes/@r(1.75, 2)*u));
maple: mix(@r(.2, .5), 1, (1-s)**@r(.45, .9))*(1-.12u)*(1-.06*fract(7*s**.7));
elm: max(0, cos(u) - @r(.75, 1.5) * sin(u)) * (1 - .04 * fract(14u));
r: @p(kind: maple, elm) * (1 + @r(-.1, .1) * cos(t));
move: 0 -.3;
});
--flakes: @svg(
viewBox: 40;
stroke: #fff;
stroke-width: .3;
fill: none;
filter: @svg-filter(.2, 20);
g*48 {
transform: translate(@r(6, 34) @r(6, 34)) rotate(@r60) scale(@r1);
path*6 {
transform: rotate(@n(*60));
d: M 0 0 H 9 M 5 3 3 0 5 -3 M 8 2 7 0 8 -2;
}
}
);
::before, ::after {
content: '';
position: absolute;
inset: 0;
rotate: var(--turn);
clip-path: @shape(
union {
$blade;
smooth: .1;
square { scale: @r(.01, .015) .16; move: 0 -.46 }
}
);
}
::before {
filter: @svg-filter(.015, 20, seed=@r1000);
background:
repeating-conic-gradient(
at 50% 65%, #fff1, #0000, #0001 calc(1turn/var(--lobes))
)
@p(kind: hsl(@r(2, 26) 70% @r(34%, 44%)),
hsl(@r(20, 34) 52% @r(28%, 38%)));
}
::after {
filter: blur(2px);
mask: $flakes 0 0/33%, linear-gradient(rgba(0, 0, 0, @r(0, .3)) 0 0);
background: @svg-polygon(
$blade;
stroke: #f4f9fb;
stroke-width: .1;
grow: @R.t(@r(-.05, -.01), 0, 3, 1, 3);
);
}