/*** trying to improve the junctions between tiles ***/
/********** ...it seems to be imposible... ***********/

html {
  --u: 1vmax; /* change size */
  --hue: hue-rotate(0deg); /* change color hue*/
  --c1: #4d7931;
  --c2: #88b968;
  --c3: #cde6bc;
  --gp: 50% / calc(var(--u) * 20) calc(var(--u) * 12);
  --g1: repeating-conic-gradient(
    from 0deg at 50% 40%,
    var(--c2) 0% 15%,
    #fff0 0% 100%
  );
  --g2: repeating-conic-gradient(
    from 0deg at 66.5% 80%,
    #fff0 0% 35%,
    var(--c2) 0% 65%,
    #fff0 0% 100%
  );
  --g3: repeating-conic-gradient(
    from 0deg at 83.5% 30%,
    var(--c1) 0% 35%,
    #fff0 0% 100%
  );
  --g4: repeating-conic-gradient(
    from 0deg at 66.5% 50%,
    #fff0 0% 15%,
    var(--c2) 0% 35%,
    var(--c1) 0% 50%,
    #fff0 0% 100%
  );
  --bp: calc(var(--u) * -10) calc(var(--u) * -6);
  height: 100vh;
  filter: var(--hue);
  background: var(--g1) var(--gp), var(--g2) var(--gp), var(--g3) var(--gp),
    var(--g4) var(--gp), var(--g1) var(--gp), var(--g2) var(--gp),
    var(--g3) var(--gp), var(--g4) var(--gp),
    repeating-linear-gradient(
        90deg,
        var(--c3) 0% 50%,
        var(--c2) 66.5%,
        var(--c1) 66.5% 100%
      )
      50% / calc(var(--u) * 10) calc(var(--u) * 12);
  background-position: var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0,
    0 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.