style1.1.css

css-doodle {
    --color: @p(#E63946, #F1FAEE, #A8DADC, #457B9D, #1D3557);
    --position: @r(0%, 100%) @r(0%, 100%);

    --pat-1: (
      linear-gradient(var(--color), @lp)
      var(--position) / @r(1px) @r(15%)
    );
    
    --pat-2: (
      linear-gradient(@p(
        -180deg, -135deg, -90deg, -45deg,
        0deg, 45deg, 90deg, 135deg, 180deg 
      ),
      var(--color) 50%, transparent 0)
      var(--position) / @r(3%) @lr
    );

    --pat-3: (
      linear-gradient(var(--color), @lp)
      var(--position) / @r(15%) 1px
    );

    --pat-4: (
      radial-gradient(var(--color), @lp)
      var(--position) / @r(40px) @lr
    );

    --pat-5: (
      radial-gradient(var(--color) 50%, transparent 0)
      var(--position) / @r(40px) @lr()
    );

    --pat-6: (
      conic-gradient(
        from calc(145deg + @ri(4) * 90deg), 
        var(--color) 0,
        @lp 20%,
        transparent 20%,
        transparent 50%
      )
      var(--position) / @r(5%) @lr
    );

    --pat-7: (
      linear-gradient(
        @p(45deg, -45deg),
        @stripe(
          transparent, 
          var(--color) 1px, 
          transparent 
        )
      )
      var(--position) / @r(5%) @lr
    );

    --rule: (
      :doodle {
        @grid: 1 / 100vw 100vh; 
        background-color: #fff;
      }
      background:
        @m(80, var(--pat-1)),
        @m(80, var(--pat-2)),
        @m(80, var(--pat-3)),
        @m(80, var(--pat-4)),
        @m(80, var(--pat-5)),
        @m(80, var(--pat-6)),
        @m(80, var(--pat-7));
      background-repeat: no-repeat; 
      background-blend-mode: color-burn;
     
    );
      width: 100vw;
}