CodePen Embed - Tessellation Experiment #4

<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

:root {
	--unit: 1vmax;
	--border: 2px; /* change border size */
	--light: #79ff54;
	--dark: #27b700;
	--black: #333333;
	--hue: hue-rotate(0deg); /* change color hue */
	--sat: saturate(1.15); /* change saturation */
}

body {
	filter: var(--hue) var(--sat);
	background: var(--black);
	display: flex;
	width: 120vw;
	height: 120vh;
	overflow: hidden;
	margin: 0;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	margin-left: -10vw;
	margin-top: -10vh;
	/* transform: scale(0.55); */
	border: 2px solid red;
	box-sizing: border-box;
}

div {
	width: calc(var(--unit) * 10);
	height: calc(var(--unit) * 10);
	background: linear-gradient(-50deg, var(--dark), var(--light) 70%);
	position: relative;
	float: left;
	border: var(--border) solid var(--black);
	border-radius: calc(var(--border) * 3);
	cursor: pointer;
}

div:before {
	content: "";
	background: var(--light);
	position: absolute;
	width: calc(var(--unit) * 2);
	height: calc(var(--unit) * 2);
	top: 40%;
	left: calc(var(--unit) * -2);
	z-index: 2;
	border: calc(var(--border) * 2) solid var(--black);
	box-sizing: border-box;
	border-right: 0;
	border-radius: 35% 0 0 75%;
}

div:after {
	content: "";
	background: var(--light);
	position: absolute;
	width: calc(var(--unit) * 3.5);
	height: calc(var(--unit) * 3);
	top: -30%;
	left: calc(var(--unit) * 1.5);
	z-index: 2;
	border: calc(var(--border) * 2) solid var(--black);
	box-sizing: border-box;
	border-bottom: 0;
	border-radius: 35% 65% 0 0;
}

/*** POSITION ***/

div:nth-child(n + 12):nth-child(-n + 22) {
	left: calc(var(--unit) * 2);
}

div:nth-child(n + 23):nth-child(-n + 33) {
	left: calc(var(--unit) * 4);
}

div:nth-child(n + 34):nth-child(-n + 44) {
	left: calc(var(--unit) * 6);
}

div:nth-child(n + 45):nth-child(-n + 55) {
	left: calc(var(--unit) * -2.25);
}

div:nth-child(n + 56):nth-child(-n + 66) {
	left: calc(var(--unit) * -0.25);
}

div:nth-child(n + 67):nth-child(-n + 77) {
	left: calc(var(--unit) * 1.75);
}

div:nth-child(n + 78):nth-child(-n + 88) {
	left: calc(var(--unit) * 3.75);
}

div:nth-child(n + 89):nth-child(-n + 99) {
	left: calc(var(--unit) * 5.75);
}

div:nth-child(n + 100):nth-child(-n + 110) {
	left: calc(var(--unit) * -2.5);
}

div:nth-child(n + 111):nth-child(-n + 121) {
	left: calc(var(--unit) * -0.5);
}

/*** COLOR ***/

div:nth-child(odd) {
	filter: hue-rotate(140deg);
}

div:nth-child(3n + 3) {
	filter: hue-rotate(80deg);
}

div:nth-child(5n + 5) {
	filter: hue-rotate(240deg);
}

div:nth-child(7n + 7) {
	filter: hue-rotate(280deg);
}

div:nth-child(9n + 9) {
	filter: hue-rotate(320deg);
}

div:nth-child(7n + 5) {
	filter: hue-rotate(180deg);
}

/* black piece */

div:nth-child(39) {
	background: linear-gradient(-50deg, #222222, var(--black) 70%) !important;
}

div:nth-child(39):before,
div:nth-child(39):after {
	background: var(--black);
}

/*** PORTRAIT VIEW ***/

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

	body {
		margin-left: -12vw;
		margin-top: -2vh;
	}

	div:nth-child(n + 8):nth-child(-n + 14) {
		left: calc(var(--unit) * 2);
	}

	div:nth-child(n + 15):nth-child(-n + 21) {
		left: calc(var(--unit) * 4);
	}

	div:nth-child(n + 22):nth-child(-n + 28) {
		left: calc(var(--unit) * 6);
	}

	div:nth-child(n + 29):nth-child(-n + 35) {
		left: calc(var(--unit) * -2.275);
	}

	div:nth-child(n + 36):nth-child(-n + 42) {
		left: calc(var(--unit) * -0.25);
	}

	div:nth-child(n + 43):nth-child(-n + 49) {
		left: calc(var(--unit) * 1.75);
	}

	div:nth-child(n + 50):nth-child(-n + 56) {
		left: calc(var(--unit) * 3.75);
	}

	div:nth-child(n + 57):nth-child(-n + 63) {
		left: calc(var(--unit) * 5.75);
	}

	div:nth-child(n + 64):nth-child(-n + 70) {
		left: calc(var(--unit) * -2.5);
	}

	div:nth-child(n + 71):nth-child(-n + 77) {
		left: calc(var(--unit) * -0.5);
	}

	div:nth-child(n + 78):nth-child(-n + 84) {
		left: calc(var(--unit) * 1.5);
	}

	div:nth-child(n + 85):nth-child(-n + 91) {
		left: calc(var(--unit) * 3.5);
	}

	div:nth-child(n + 92):nth-child(-n + 98) {
		left: calc(var(--unit) * 5.5);
	}

	div:nth-child(n + 99):nth-child(-n + 105) {
		left: calc(var(--unit) * -3.25);
	}

	div:nth-child(n + 106):nth-child(-n + 112) {
		left: calc(var(--unit) * -1.25);
	}

	div:nth-child(n + 113):nth-child(-n + 119) {
		left: calc(var(--unit) * 0.75);
	}

	div:nth-child(n + 120) {
		left: calc(var(--unit) * 2.75) !important;
	}

	div:nth-child(14),
	div:nth-child(35),
	div:nth-child(49) {
		filter: hue-rotate(320deg);
	}

	div:nth-child(19),
	div:nth-child(33),
	div:nth-child(47),
	div:nth-child(61),
	div:nth-child(75) {
		filter: hue-rotate(280deg);
	}
}

/*** HOVER - ACTIVE ***/

div:hover {
	background: linear-gradient(-50deg, #222222, var(--black) 70%) !important;
}

div:hover:before,
div:hover:after {
	background: var(--black) !important;
}

div:active {
	background: linear-gradient(-50deg, #efefef, #ffffff 70%) !important;
}

div:active:before,
div:active:after {
	background: #ffffff !important;
}

This Pen is owned by Josetxu on CodePen.

See more by @josetxu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.