@property --x {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --y {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

:root {
	--width: 100px;
	--offset: 20px;
	--background-color: whitesmoke;
	color: brown;
}

body {
	--x: 0deg;
	--y: 25%;

	background-image:
		linear-gradient(calc(var(--x) + 135deg), var(--background-color) var(--y), transparent calc(var(--y) + 1px)),
		linear-gradient(calc(var(--x) + 225deg), var(--background-color) var(--y), transparent calc(var(--y) + 1px)),
		linear-gradient(calc(var(--x) + 315deg), var(--background-color) var(--y), transparent calc(var(--y) + 1px)),
		linear-gradient(calc(var(--x) + 45deg), var(--background-color) var(--y), transparent calc(var(--y) + 1px));
	background-size: var(--width) var(--width);
	background-position: var(--offset) var(--offset);
	background-color: currentColor;
	-webkit-animation:
		animate-angle linear 4s infinite,
		animate-length linear 4s infinite;
	animation:
		animate-angle linear 4s infinite,
		animate-length linear 4s infinite;
}

@-webkit-keyframes animate-angle {
	to {
		--x: 90deg;
	}
}

@keyframes animate-angle {
	to {
		--x: 90deg;
	}
}

@-webkit-keyframes animate-length {
	33.333% {
		--y: 22%;
	}
	50% {
		--y: 20%;
	}
}

@keyframes animate-length {
	33.333% {
		--y: 22%;
	}
	50% {
		--y: 20%;
	}
}

html,
body {
	overflow: hidden;
	padding: 0;
	margin: 0;
	height: 100%;
}