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.