Untitled

<css-doodle>
  <style>
    :doodle {
      @grid: 6x8 / 600px 800px / #05090b;
      @seed: 2;
      position: relative;
      overflow: hidden;
      mask: radial-gradient(ellipse at 50% 100%, #fff 30%, #0000 95%);
      filter: saturate(.8) contrast(1.1);
      animation: reveal 1.6s ease-in both;
      --tree-wobble: @svg-filter(.1 .3, 10, seed=2);
    }

    @nth(1) {
      @place: center;
      @size: 105%;
      z-index: -1;
      background:
        linear-gradient(@pn(170deg, -170deg),
          @stripe.@m2(hwb(140 calc(60% - 60%/@N*@n) calc(25% + 70%/@N*@n)) 80%)),
        @pattern(
          moon: length(pos - vec2(.12, .3));
          glow: exp(-4moon) * .8 + exp(-1.4moon) * .24;
          haze: (1 - smoothstep(-.5, -.1, pos.y)) * .25;
          fill: vec3(.01, .035, .02) + glow * vec3(.18, .32, .21) + haze * vec3(.07, .14, .09);
        );
      background-blend-mode: overlay;
      filter: @svg-filter(.08 .25, 28, 2);
    }

    @nth(2) {
      @place: 72% 27.5%;
      @size: 96px;
      z-index: 1;
      border-radius: 50%;
      background: #d9e3bd;
      filter: blur(12px);
      opacity: .5;
      box-shadow: 0 0 60px 30px #d7e6b455, 0 0 160px 80px #8fbf6b2e;
      animation: reveal 2s .8s ease-out both;
    }

    @nth(3, 4) {
      --o: @i;
      @place: 50% @calc(@i * 11 + 31)%;
      @size: 200% 42%;
      z-index: @calc(@i * 2 - 3);
      background: @pattern(
        n: fbm(uv.x * 6 + $o * 7, uv.y * 2.4 + $o);
        a: smoothstep(.28, .72, n) * sin(uv.y * π) ** 1.4;
        fill: vec4(.35, .46, .39, a * .85);
      );
      animation:
        drift @calc(40 + @i * 10)s ease-in-out infinite alternate,
        reveal 2.5s @calc(@i * .25 - .55)s ease-out both;
    }

    :doodle::before, :doodle::after {
      content: "";
      position: absolute;
      inset: 0 -50%;
      pointer-events: none;
      animation:
        drift 60s ease-in-out infinite alternate,
        reveal 2.5s .2s ease-out both;
    }

    :doodle::before {
      z-index: 0;
      background: @pattern(
        n: fbm(uv.x * 5, uv.y * 3 + 4);
        band: smoothstep(.05, .45, uv.y) * (1 - smoothstep(.5, .9, uv.y));
        a: smoothstep(.25, .7, n) * band * .85;
        fill: vec4(.38, .5, .41, a);
      );
    }

    :doodle::after {
      z-index: 9;
      mix-blend-mode: screen;
      animation:
        drift 46s ease-in-out infinite alternate-reverse,
        reveal 2.5s .6s ease-out both;
      background: @pattern(
        n: fbm(uv.x * 7 + 9, uv.y * 4);
        low: 1 - smoothstep(.05, .6, uv.y);
        a: smoothstep(.3, .75, n) * (.15 + low * .85) * .75;
        fill: vec4(.45, .58, .48, a);
      );
    }

    @row(8, 7, 6) {
      z-index: @calc(@y * 2 - 10);
      :after {
        content: "🌲";
        font-size: 100px;
        @place: @calc((8-@y)*@r(10))% @calc(max(@y - 7, 0) * 18 - (8 - @y) * @r(5))%;
        transform-origin: 50% 100%;
        transform: scaleY(@calc(@y/6 * @r(0.8, 2.5))) scaleX(@calc(@y/8 * @r(0.7, 1.8)));
        text-shadow: @m2(@r(-70px, 90px) @calc(@r(-80, 20) * (8.8 - @y) / 2.8)px 0 hsla(@r(90, 155), @r(30, 60)%, @r(12, 35)%, @calc(@y/8)));
        filter:
          saturate(.35) brightness(.2) blur(@calc(1 + (8-@y)*.7)px)
          hue-rotate(@calc((8-@y)*8)deg) drop-shadow(-10px -5px 4px #000)
          var(--tree-wobble);
        opacity: @calc(pow(@y / 8, 3.2));
        animation: sway @r(8, 14)s ease-in-out infinite alternate;
        animation-delay: -@r(8)s;
      }
    }

    @keyframes sway {
      from { rotate: -.5deg; translate: -1px 0; }
      to   { rotate: .5deg;  translate: 1px 0; }
    }

    @keyframes reveal {
      from { opacity: 0; }
    }

    @keyframes drift {
      from { translate: -10% 0; }
      to   { translate: 10% 0; }
    }
  </style>
</css-doodle>