HTML, CSS and JavaScript playground

</div>

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

</div>

</div>
</div>

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

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  display: grid;
  grid-template-columns: 175px 175px 175px;
  grid-template-rows: 175px 175px 175px;
  background: red;
  width: 520px;
  height: 950x;
}

.box1 {
  height: 170px;
  width: 170px;

background: linear-gradient(teal, teal) center / 10px 10px no-repeat,
    linear-gradient(black, black) center / 20px 20px no-repeat,
    linear-gradient(orange, orange) center / 30px 30px no-repeat,
    linear-gradient(black, black) center / 40px 40px no-repeat,
    linear-gradient(teal, teal) center / 50px 50px no-repeat,
    linear-gradient(black, black) center / 60px 60px no-repeat,
    linear-gradient(orange, orange) center / 70px 70px no-repeat,
    linear-gradient(black, black) center / 80px 80px no-repeat,
    linear-gradient(teal, teal) center / 90px 90px no-repeat,
    linear-gradient(black, black) center / 100px 100px no-repeat,
    linear-gradient(orange, orange) center / 110px 110px no-repeat,
    linear-gradient(black, black) center / 120px 120px no-repeat,
    linear-gradient(teal, teal) center / 130px 130px no-repeat,
    linear-gradient(black, black) center / 140px 140px no-repeat,
    linear-gradient(orange, orange) center / 150px 150px no-repeat,
    linear-gradient(black, black) center / 160px 160px no-repeat,
    linear-gradient(teal, teal) center / 170px 170px no-repeat;
  background-repeat: no-repeat;
}

.box2 {
  width: 170px;
  height: 170px;

box-shadow: inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
    inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
    inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
    inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
    inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}

.box3 {
  width: 170px;
  height: 170px;

.box4 {
  width: 170px;
  height: 170px;
  background: repeating-linear-gradient(
    teal 0 5px,
    black 0 10px,
    orange 0 15px,
    black 0 20px
  );
  background-size: 100% 50%;
}

.box4::before {
  content: "";
  display: block;
  padding-top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}

.box5 {
  width: 170px;
  height: 170px;

background: repeating-linear-gradient(
        0deg,
        teal 0 5px,
        black 0 10px,
        orange 0 15px,
        black 0 20px
      )
      top,
    repeating-linear-gradient(
        180deg,
        teal 0 5px,
        black 0 10px,
        orange 0 15px,
        black 0 20px
      )
      bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box5::before {
  content: "";
  display: block;
  padding-top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}

.box6 {
  width: 170px;
  height: 170px;
}

.box7 {
  width: 170px;
  height: 170px;
}

.color1 {
  border: 5px solid teal;
}

.color2 {
  border: 5px solid black;
}

.color3 {
  border: 5px solid orange;
}

.color4 {
  border: 5px solid black;
}

.color5 {
  border: 5px solid teal;
}

.color6 {
  border: 5px solid black;
}

.color7 {
  border: 5px solid orange;
}

.color8 {
  border: 5px solid black;
}

.color9 {
  border: 5px solid teal;
}

.color10 {
  border: 5px solid black;
}

.color11 {
  border: 5px solid orange;
}

.color12 {
  border: 5px solid black;
}

.color13 {
  border: 5px solid teal;
}

.color14 {
  border: 5px solid black;
}

.color15 {
  border: 5px solid orange;
}

.color16 {
  border: 5px solid black;
}

.color17 {
  border: 5px solid teal;
}

.box8 {
  width: 170px;
  height: 170px;

background-image: linear-gradient(to bottom, teal 5px, #0000 5px),
    linear-gradient(to left, teal 5px, #0000 5px),
    linear-gradient(to top, teal 5px, #0000 5px),
    linear-gradient(to right, teal 5px, #0000 5px),
    linear-gradient(to bottom, black 10px, #0000 10px),
    linear-gradient(to left, black 10px, #0000 10px),
    linear-gradient(to top, black 10px, #0000 10px),
    linear-gradient(to right, black 10px, #0000 10px),
    linear-gradient(to bottom, orange 15px, #0000 15px),
    linear-gradient(to left, orange 15px, #0000 15px),
    linear-gradient(to top, orange 15px, #0000 15px),
    linear-gradient(to right, orange 15px, #0000 15px),
    linear-gradient(to bottom, black 20px, #0000 20px),
    linear-gradient(to left, black 20px, #0000 20px),
    linear-gradient(to top, black 20px, #0000 20px),
    linear-gradient(to right, black 20px, #0000 20px),
    linear-gradient(to bottom, teal 25px, #0000 25px),
    linear-gradient(to left, teal 25px, #0000 25px),
    linear-gradient(to top, teal 25px, #0000 25px),
    linear-gradient(to right, teal 25px, #0000 25px),
    linear-gradient(to bottom, black 30px, #0000 30px),
    linear-gradient(to left, black 30px, #0000 30px),
    linear-gradient(to top, black 30px, #0000 30px),
    linear-gradient(to right, black 30px, #0000 30px),
    linear-gradient(to bottom, orange 35px, #0000 35px),
    linear-gradient(to left, orange 35px, #0000 10px),
    linear-gradient(to top, orange 35px, #0000 35px),
    linear-gradient(to right, orange 35px, #0000 35px),
    linear-gradient(to bottom, black 40px, #0000 40px),
    linear-gradient(to left, black 40px, #0000 40px),
    linear-gradient(to top, black 40px, #0000 40px),
    linear-gradient(to right, black 40px, #0000 40px),
    linear-gradient(to bottom, teal 45px, #0000 45px),
    linear-gradient(to left, teal 45px, #0000 45px),
    linear-gradient(to top, teal 45px, #0000 45px),
    linear-gradient(to right, teal 45px, #0000 45px),
    linear-gradient(to bottom, black 50px, #0000 50px),
    linear-gradient(to left, black 50px, #0000 10px),
    linear-gradient(to top, black 50px, #0000 50px),
    linear-gradient(to right, black 50px, #0000 50px),
    linear-gradient(to bottom, orange 55px, #0000 55px),
    linear-gradient(to left, orange 55px, #0000 10px),
    linear-gradient(to top, orange 55px, #0000 55px),
    linear-gradient(to right, orange 55px, #0000 55px),
    linear-gradient(to bottom, black 60px, #0000 60px),
    linear-gradient(to left, black 60px, #0000 60px),
    linear-gradient(to top, black 60px, #0000 60px),
    linear-gradient(to right, black 60px, #0000 60px),
    linear-gradient(to bottom, teal 65px, #0000 65px),
    linear-gradient(to left, teal 65px, #0000 65px),
    linear-gradient(to top, teal 65px, #0000 65px),
    linear-gradient(to right, teal 65px, #0000 65px),
    linear-gradient(to bottom, black 70px, #0000 70px),
    linear-gradient(to left, black 70px, #0000 70px),
    linear-gradient(to top, black 70px, #0000 70px),
    linear-gradient(to right, black 70px, #0000 70px),
    linear-gradient(to bottom, orange 75px, #0000 75px),
    linear-gradient(to left, orange 75px, #0000 75px),
    linear-gradient(to top, orange 75px, #0000 75px),
    linear-gradient(to right, orange 75px, #0000 75px),
    linear-gradient(to bottom, black 80px, #0000 80px),
    linear-gradient(to left, black 80px, #0000 80px),
    linear-gradient(to top, black 80px, #0000 80px),
    linear-gradient(to right, black 80px, #0000 80px),
    linear-gradient(to bottom, teal 85px, #0000 85px),
    linear-gradient(to left, teal 85px, #0000 85px),
    linear-gradient(to top, teal 85px, #0000 85px),
    linear-gradient(to right, teal 85px, #0000 85px);

background-size: 170px 170px;
  background-repeat: no-repeat;
  /* background-position: 0 0; default */
  /* background-repeat: repeat; default */
}

.box9 {
  width: 170px;
  height: 170px;
  --coloration: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
  background: repeating-linear-gradient(0deg, var(--coloration)) top,
    repeating-linear-gradient(180deg, var(--coloration)) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box9:before {
  content: "";
  display: block;
  padding-top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}

.box10 {
  width: 170px;
  height: 170px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(270deg, teal 5px, #0000 5px),
    linear-gradient(360deg, teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(teal, teal);
  background-size: 170px 170px;
}

.box11 {
  width: 170px;
  height: 170px;
  background-image: linear-gradient(teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(270deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(360deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(90deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(black 5px, #0000 5px 160px, black 160px),
    linear-gradient(270deg, black 5px, #0000 5px 160px, black 160px),
    linear-gradient(360deg, black 5px, #0000 5px 160px, black 160px),
    linear-gradient(90deg, black 5px, #0000 5px 160px, black 160px),
    linear-gradient(orange 5px, #0000 5px 155px, orange 155px),
    linear-gradient(270deg, orange 5px, #0000 5px 155px, orange 155px),
    linear-gradient(360deg, orange 5px, #0000 5px 155px, orange 155px),
    linear-gradient(90deg, orange 5px, #0000 5px 155px, orange 155px),
    linear-gradient(black 5px, #0000 5px 150px, black 150px),
    linear-gradient(270deg, black 5px, #0000 5px 150px, black 150px),
    linear-gradient(360deg, black 5px, #0000 5px 150px, black 150px),
    linear-gradient(90deg, black 5px, #0000 5px 150px, black 150px),
    linear-gradient(teal 5px, #0000 5px 145px, teal 145px),
    linear-gradient(270deg, teal 5px, #0000 5px 145px, teal 145px),
    linear-gradient(360deg, teal 5px, #0000 5px 145px, teal 145px),
    linear-gradient(90deg, teal 5px, #0000 5px 145px, teal 145px),
    linear-gradient(black 5px, #0000 5px 140px, black 140px),
    linear-gradient(270deg, black 5px, #0000 5px 140px, black 140px),
    linear-gradient(360deg, black 5px, #0000 5px 140px, black 140px),
    linear-gradient(90deg, black 5px, #0000 5px 140px, black 140px),
    linear-gradient(orange 5px, #0000 5px 135px, orange 135px),
    linear-gradient(270deg, orange 5px, #0000 5px 135px, orange 135px),
    linear-gradient(360deg, orange 5px, #0000 5px 135px, orange 135px),
    linear-gradient(90deg, orange 5px, #0000 5px 135px, orange 135px),
    linear-gradient(black 5px, #0000 5px 130px, black 130px),
    linear-gradient(270deg, black 5px, #0000 5px 130px, black 130px),
    linear-gradient(360deg, black 5px, #0000 5px 130px, black 130px),
    linear-gradient(90deg, black 5px, #0000 5px 130px, black 130px),
    linear-gradient(teal 5px, #0000 5px 125px, teal 125px),
    linear-gradient(270deg, teal 5px, #0000 5px 125px, teal 125px),
    linear-gradient(360deg, teal 5px, #0000 5px 125px, teal 125px),
    linear-gradient(90deg, teal 5px, #0000 5px 125px, teal 125px),
    linear-gradient(black 5px, #0000 5px 120px, black 120px),
    linear-gradient(270deg, black 5px, #0000 5px 120px, black 120px),
    linear-gradient(360deg, black 5px, #0000 5px 120px, black 120px),
    linear-gradient(90deg, black 5px, #0000 5px 120px, black 120px),
    linear-gradient(orange 5px, #0000 5px 115px, orange 115px),
    linear-gradient(270deg, orange 5px, #0000 5px 115px, orange 115px),
    linear-gradient(360deg, orange 5px, #0000 5px 115px, orange 115px),
    linear-gradient(90deg, orange 5px, #0000 5px 115px, orange 115px),
    linear-gradient(black 5px, #0000 5px 110px, black 110px),
    linear-gradient(270deg, black 5px, #0000 5px 110px, black 110px),
    linear-gradient(360deg, black 5px, #0000 5px 110px, black 110px),
    linear-gradient(90deg, black 5px, #0000 5px 110px, black 110px),
    linear-gradient(teal 5px, #0000 5px 105px, teal 105px),
    linear-gradient(270deg, teal 5px, #0000 5px 105px, teal 105px),
    linear-gradient(360deg, teal 5px, #0000 5px 105px, teal 105px),
    linear-gradient(90deg, teal 5px, #0000 5px 105px, teal 105px),
    linear-gradient(black 5px, #0000 5px 100px, black 100px),
    linear-gradient(270deg, black 5px, #0000 5px 100px, black 100px),
    linear-gradient(360deg, black 5px, #0000 5px 100px, black 100px),
    linear-gradient(90deg, black 5px, #0000 5px 100px, black 100px),
    linear-gradient(orange 5px, #0000 5px 95px, orange 95px),
    linear-gradient(270deg, orange 5px, #0000 5px 95px, orange 95px),
    linear-gradient(360deg, orange 5px, #0000 5px 95px, orange 95px),
    linear-gradient(90deg, orange 5px, #0000 5px 95px, orange 95px),
    linear-gradient(black 5px, #0000 5px 90px, black 90px),
    linear-gradient(270deg, black 5px, #0000 5px 90px, black 90px),
    linear-gradient(360deg, black 5px, #0000 5px 90px, black 90px),
    linear-gradient(90deg, black 5px, #0000 5px 90px, black 90px),
    linear-gradient(teal 5px, #0000 5px 85px, teal 85px),
    linear-gradient(270deg, teal 5px, #0000 5px 85px, teal 85px),
    linear-gradient(360deg, teal 5px, #0000 5px 85px, teal 85px),
    linear-gradient(90deg, teal 5px, #0000 5px 85px, teal 85px);

background-size: 170px 170px;
}

.box12 {
  width: 170px;
  height: 170px;
  background-image: linear-gradient(teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(270deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(360deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(90deg, teal 5px, #0000 5px 170px, teal 170px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(270deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(360deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(270deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(360deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(270deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(360deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(270deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(360deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(270deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(360deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(270deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(360deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(270deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(360deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(270deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(360deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(270deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(360deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(270deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(360deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(270deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(360deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(270deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(360deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(270deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(360deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(270deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(360deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(270deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(360deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(teal 85px, #0000 85px 85px, teal 85px),
    linear-gradient(270deg, teal 85px, #0000 85px 85px, teal 85px),
    linear-gradient(360deg, teal 85px, #0000 85px 85px, teal 85px),
    linear-gradient(90deg, teal 85px, #0000 85px 85px, teal 85px);

background-size: 170px 170px;
}

.box13 {
  margin: 90px 90px 90px 85px;
  box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
    0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
    0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
    0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
    0 0 0 80px black, 0 0 0 85px teal;
}

.box14 {
  width: 170px;
  height: 170px;
}

.box15 {
  width: 170px;
  height: 170px;
}

.box16 {
  width: 170px;
  height: 170px;
}
.box17 {
  width: 170px;
  height: 170px;
}