霜降

Fork

Code

@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);
  );
}