/*** 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.