/*** 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.