<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

:root {
	--unit: 1vmax; /* change size min=1 max=2 */
	--clr1: #795548; /* change color 1 */
	--clr2: #ff9800; /* change color 2 */
	--hue: hue-rotate(10deg); /* change color hue */
}

body {
	filter: var(--hue);
	background: #222222;
	display: flex;
	align-items: center;
	height: 122.22vh;
	width: 122.22vw;
	overflow: hidden;
	margin: 0;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: center;
	margin-left: -8vw;
	margin-top: -8vh;
}

div {
	width: calc(var(--unit) * 11.11);
	height: calc(var(--unit) * 11.11);
	background: radial-gradient(
			circle at 35% 65%,
			var(--clr2) 10%,
			#222 11%,
			transparent 12%,
			transparent 20%,
			#222 21%,
			var(--clr2) 22%,
			var(--clr2) 30%,
			#222 31%,
			transparent 32%
		),
		var(--clr1);
	position: relative;
	float: left;
}

div:before,
div:after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	left: 0;
	border: calc(var(--unit) * 5.5) solid transparent;
	border-left: calc(var(--unit) * 3) solid var(--clr1);
	width: 100%;
	height: 100%;
	transform: rotateY(180deg);
	transform-origin: left center;
	filter: drop-shadow(calc(var(--unit) * -11.11) 0px 0px #222)
		drop-shadow(1px 0px 0px #222);
}

div:after {
	transform: rotate(90deg)
		translate(calc(var(--unit) * 5.5), calc(var(--unit) * -5.5));
	z-index: 1;
	filter: drop-shadow(1px 0px 0px #222);
}

div:nth-child(odd) {
	background: radial-gradient(
			circle at 35% 65%,
			var(--clr1) 10%,
			#222 11%,
			transparent 12%,
			transparent 20%,
			#222 21%,
			var(--clr1) 22%,
			var(--clr1) 30%,
			#222 31%,
			transparent 32%
		),
		var(--clr2);
}

div:nth-child(odd):before {
	border-left: calc(var(--unit) * 3) solid var(--clr2);
}

div:nth-child(odd):after {
	border-left: calc(var(--unit) * 3) solid var(--clr2);
}

@media only screen and (orientation: portrait) {
	:root {
		--unit: 2vmin;
	}
}