Multiple instances of a square gradient

Question

How are square gradients repeated?

In the code provided, I made a square gradient 8 different ways.

1. To be able to repeat a square gradient, which of those codes would I be using?

2. And how would it be done?

https://jsfiddle.net/7s468kwg/

This is 1 square, how would I have this square repeat itself more than one time?

That is what I am trying to do.

Repeat like this:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 530px;
  height: 530px;
}


.box1 {
  height: 170px;
  width: 170px;
  margin: 0 5px 5px 0;
  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;
  margin: 0 5px 5px 5px;
  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;
  margin: 0 0 5px 5px;
  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;
}

.box4 {
    height: 170px;
  width: 170px;
  margin: 5px 5px 5px 0;
  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 {
   height: 170px;
  width: 170px;
  margin: 5px 5px 5px 5px;
  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;
  margin: 5px 0 0 5px;
}

.box7 {
  width: 170px;
  height: 170px;
  margin: 5px 5px 0 0;
}

.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: 0;
  margin: 90px 90px 90px 90px;
  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;
}

<div class="container">

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


<svg class="box6" width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="170" height="170" fill="teal" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="orange" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="teal" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="teal" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="orange" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="teal" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>

     <div class="box7">
      <div class="color1">
        <div class="color2">
          <div class="color3">
            <div class="color4">
              <div class="color5">
                <div class="color6">
                  <div class="color7">
                    <div class="color8">
                      <div class="color9">
                        <div class="color10">
                          <div class="color11">
                            <div class="color12">
                              <div class="color13">
                                <div class="color14">
                                  <div class="color15">
                                    <div class="color16">
                                      <div class="color17">
                                      
                                     
                                      </div>
                                      
                                      
                                       
                                      
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="box8"></div>
    
</div>

Answer 1

If strictly follow the tags in the question and use only CSS, then the code will be like this:

.сoncentric-squares {
  width: 1160px; height: 665px;
  background-color: teal;
  background-image: 
    linear-gradient(to bottom, 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 5px, #0000 5px),
    linear-gradient(to top, black 5px, #0000 5px),
    linear-gradient(to right, black 10px, #0000 10px),
    
    linear-gradient(to bottom, orange 15px, #0000 15px),
    linear-gradient(to left, orange 10px, #0000 10px),
    linear-gradient(to top, orange 10px, #0000 10px),
    linear-gradient(to right, orange 15px, #0000 15px),
    
    linear-gradient(to bottom, black 20px, #0000 20px),
    linear-gradient(to left, black 15px, #0000 15px),
    linear-gradient(to top, black 15px, #0000 15px),
    linear-gradient(to right, black 20px, #0000 20px),
    
    linear-gradient(to bottom, teal 25px, #0000 25px),
    linear-gradient(to left, teal 20px, #0000 20px),
    linear-gradient(to top, teal 20px, #0000 20px),
    linear-gradient(to right, teal 25px, #0000 25px),
    
    linear-gradient(to bottom, black 30px, #0000 30px),
    linear-gradient(to left, black 25px, #0000 25px),
    linear-gradient(to top, black 25px, #0000 25px),
    linear-gradient(to right, black 30px, #0000 30px),
    
    linear-gradient(to bottom, orange 35px, #0000 35px),
    linear-gradient(to left, orange 30px, #0000 30px),
    linear-gradient(to top, orange 30px, #0000 30px),
    linear-gradient(to right, orange 35px, #0000 35px),
    
    linear-gradient(to bottom, black 40px, #0000 40px),
    linear-gradient(to left, black 35px, #0000 35px),
    linear-gradient(to top, black 35px, #0000 35px),
    linear-gradient(to right, black 40px, #0000 40px),
    
    linear-gradient(to bottom, teal 45px, #0000 45px),
    linear-gradient(to left, teal 40px, #0000 40px),
    linear-gradient(to top, teal 40px, #0000 40px),
    linear-gradient(to right, teal 45px, #0000 45px),
    
    linear-gradient(to bottom, black 50px, #0000 50px),
    linear-gradient(to left, black 45px, #0000 45px),
    linear-gradient(to top, black 45px, #0000 45px),
    linear-gradient(to right, black 50px, #0000 50px),
    
    linear-gradient(to bottom, orange 55px, #0000 55px),
    linear-gradient(to left, orange 50px, #0000 50px),
    linear-gradient(to top, orange 50px, #0000 50px),
    linear-gradient(to right, orange 55px, #0000 55px),
    
    linear-gradient(to bottom, black 60px, #0000 60px),
    linear-gradient(to left, black 55px, #0000 55px),
    linear-gradient(to top, black 55px, #0000 55px),
    linear-gradient(to right, black 60px, #0000 60px),
    
    linear-gradient(to bottom, teal 65px, #0000 65px),
    linear-gradient(to left, teal 60px, #0000 60px),
    linear-gradient(to top, teal 60px, #0000 60px),
    linear-gradient(to right, teal 65px, #0000 65px),
    
    linear-gradient(to bottom, black 70px, #0000 70px),
    linear-gradient(to left, black 65px, #0000 65px),
    linear-gradient(to top, black 65px, #0000 65px),
    linear-gradient(to right, black 70px, #0000 70px),
    
    linear-gradient(to bottom, orange 75px, #0000 75px),
    linear-gradient(to left, orange 70px, #0000 70px),
    linear-gradient(to top, orange 70px, #0000 70px),
    linear-gradient(to right, orange 75px, #0000 75px),
    
    linear-gradient(to bottom, black 80px, #0000 80px),
    linear-gradient(to left, black 75px, #0000 75px),
    linear-gradient(to top, black 75px, #0000 75px),
    linear-gradient(to right, black 80px, #0000 80px),
    
    linear-gradient(to bottom, teal 85px, #0000 85px),
    linear-gradient(to left, teal 85px, #0000 85px);
  background-size: 165px 165px;
  /* background-position: 0 0; default */
  /* background-repeat: repeat; default */
}

body { margin: 0; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; }

<div class="сoncentric-squares"></div>

UPD: From comments:

To have 4 colors in the middle like this:

what would this part of the code be changed to?

.сoncentric-squares-with-center-multicolor {
  width: 1160px; height: 665px;
  background:
    linear-gradient(to bottom, 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 5px, #0000 5px),
    linear-gradient(to top, black 5px, #0000 5px),
    linear-gradient(to right, black 10px, #0000 10px),
    
    linear-gradient(to bottom, orange 15px, #0000 15px),
    linear-gradient(to left, orange 10px, #0000 10px),
    linear-gradient(to top, orange 10px, #0000 10px),
    linear-gradient(to right, orange 15px, #0000 15px),
    
    linear-gradient(to bottom, black 20px, #0000 20px),
    linear-gradient(to left, black 15px, #0000 15px),
    linear-gradient(to top, black 15px, #0000 15px),
    linear-gradient(to right, black 20px, #0000 20px),
    
    linear-gradient(to bottom, teal 25px, #0000 25px),
    linear-gradient(to left, teal 20px, #0000 20px),
    linear-gradient(to top, teal 20px, #0000 20px),
    linear-gradient(to right, teal 25px, #0000 25px),
    
    linear-gradient(to bottom, black 30px, #0000 30px),
    linear-gradient(to left, black 25px, #0000 25px),
    linear-gradient(to top, black 25px, #0000 25px),
    linear-gradient(to right, black 30px, #0000 30px),
    
    linear-gradient(to bottom, orange 35px, #0000 35px),
    linear-gradient(to left, orange 30px, #0000 30px),
    linear-gradient(to top, orange 30px, #0000 30px),
    linear-gradient(to right, orange 35px, #0000 35px),
    
    linear-gradient(to bottom, black 40px, #0000 40px),
    linear-gradient(to left, black 35px, #0000 35px),
    linear-gradient(to top, black 35px, #0000 35px),
    linear-gradient(to right, black 40px, #0000 40px),
    
    linear-gradient(to bottom, teal 45px, #0000 45px),
    linear-gradient(to left, teal 40px, #0000 40px),
    linear-gradient(to top, teal 40px, #0000 40px),
    linear-gradient(to right, teal 45px, #0000 45px),
    
    linear-gradient(to bottom, black 50px, #0000 50px),
    linear-gradient(to left, black 45px, #0000 45px),
    linear-gradient(to top, black 45px, #0000 45px),
    linear-gradient(to right, black 50px, #0000 50px),
    
    linear-gradient(to bottom, orange 55px, #0000 55px),
    linear-gradient(to left, orange 50px, #0000 50px),
    linear-gradient(to top, orange 50px, #0000 50px),
    linear-gradient(to right, orange 55px, #0000 55px),
    
    linear-gradient(to bottom, black 60px, #0000 60px),
    linear-gradient(to left, black 55px, #0000 55px),
    linear-gradient(to top, black 55px, #0000 55px),
    linear-gradient(to right, black 60px, #0000 60px),
    
    linear-gradient(to bottom, teal 65px, #0000 65px),
    linear-gradient(to left, teal 60px, #0000 60px),
    linear-gradient(to top, teal 60px, #0000 60px),
    linear-gradient(to right, teal 65px, #0000 65px),
    
    linear-gradient(to bottom, black 70px, #0000 70px),
    linear-gradient(to left, black 65px, #0000 65px),
    linear-gradient(to top, black 65px, #0000 65px),
    linear-gradient(to right, black 70px, #0000 70px),
    
    linear-gradient(to bottom, orange 75px, #0000 75px),
    linear-gradient(to left, orange 70px, #0000 70px),
    linear-gradient(to top, orange 70px, #0000 70px),
    linear-gradient(to right, orange 75px, #0000 75px),
    
    linear-gradient(to bottom, black 80px, #0000 80px),
    linear-gradient(to left, black 75px, #0000 75px),
    linear-gradient(to top, black 75px, #0000 75px),
    linear-gradient(to right, black 80px, #0000 80px),
    
    /* For the latest browsers: */
    conic-gradient(at 85px 85px, #3f48cc 0deg 90deg, #f00 90deg 180deg, #ff0 180deg 270deg, #99D9EA 270deg 360deg),
    /* or browsers that do not support conic-gradient: */
    left 85px top 85px / 165px 165px linear-gradient(45deg, #3f48cc 0px 59px, #0000 59px 175px, #ff0 175px 233px),     
    left 85px top 85px / 165px 165px linear-gradient(-45deg, #99D9EA 0px 60px, #0000 60px 175px, #f00 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(-135deg, #3f48cc 0px 60px, #0000 60px 175px, #ff0 175px 233px),    
    left 60px top 60px / 82px 82px linear-gradient(135deg, #f00 0px 61px, #0000 61px 175px, #99d9ea 175px 233px);
  background-size: 165px 165px;
  /* background-position: 0 0; default */
  /* background-repeat: repeat; default */
}

body { margin: 0; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; }

<div class="сoncentric-squares-with-center-multicolor"></div>

Answer 2

You just have to create a single square, group it and apply use tag. Just like this:

    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" class="box6" width="578" height="2006" viewBox="0 0 578 2006">

    <g id="square-master" inkscape:tile-cx="85" inkscape:tile-cy="85" inkscape:tile-w="170" inkscape:tile-h="170" inkscape:tile-x0="0" inkscape:tile-y0="0">    <rect id="rect4" height="170" width="170" y="0" x="0" style="fill:#008080" />   <rect id="rect6" height="160" width="160" y="5" x="5" style="fill:#000000" />   <rect id="rect8" height="150" width="150" y="10" x="10" style="fill:#ffa500" /> <rect id="rect10" height="140" width="140" y="15" x="15" style="fill:#000000" />    <rect id="rect12" height="130" width="130" y="20" x="20" style="fill:#008080" />    <rect id="rect14" height="120" width="120" y="25" x="25" style="fill:#000000" />    <rect id="rect16" height="110" width="110" y="30" x="30" style="fill:#ffa500" />    <rect id="rect18" height="100" width="100" y="35" x="35" style="fill:#000000" />    <rect id="rect20" height="90" width="90" y="40" x="40" style="fill:#008080" />  <rect id="rect22" height="80" width="80" y="45" x="45" style="fill:#000000" />  <rect id="rect24" height="70" width="70" y="50" x="50" style="fill:#ffa500" />  <rect id="rect26" height="60" width="60" y="55" x="55" style="fill:#000000" />  <rect id="rect28" height="50" width="50" y="60" x="60" style="fill:#008080" />  <rect id="rect30" height="40" width="40" y="65" x="65" style="fill:#000000" />  <rect id="rect32" height="30" width="30" y="70" x="70" style="fill:#ffa500" />  <rect id="rect34" height="20" width="20" y="75" x="75" style="fill:#000000" />  <rect id="rect36" height="10" width="10" y="80" x="80" style="fill:#008080" /></g>

    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,204)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,408)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,612)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,816)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,1020)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,1224)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,1428)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,1632)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(0,1836)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,0)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,204)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,408)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,612)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,816)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,1020)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,1224)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,1428)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,1632)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(204,1836)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,0)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,204)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,408)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,612)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,816)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,1020)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,1224)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,1428)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,1632)" width="100%" height="100%" />
    <use x="0" y="0" xlink:href="#square-master" transform="translate(408,1836)" width="100%" height="100%" />
    </svg>

Where <use x="0" y="0" set the start of the square on the svg cordinates system, xlink:href="#square-master" sets the link to the element to be cloned, in this case the grouped rectagles forming the gradient, which id is square-master, transform="translate(0,204)" sets the amount of pixels in both axis for each clone to be translated and, width="100%" height="100%" think there's no need to explain that one.

Answer 3

Using the svg as the background-image would probably be the best way.

You can explicitly set background-repeat to your needs. The default value is repeat (see comments in the snippet CSS).

I would recommend separating the svg to it's own file and use the URL of that file.

It is also possible to use it inline in your CSS as follows:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 530px;
  height: 530px;
}

.bg-repeating-squares {
  /* Repeat a background image both vertically and horizontally (this is default): */
  background-repeat: repeat;
  /* Repeat a background image only vertically: */
  /*background-repeat: repeat-y;*/
  /* Repeat a background image only horizontally: */
  /*background-repeat: repeat-x;*/
  
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='175' viewBox='0 0 175 175'><rect x='0' y='0' width='5' height='175' fill='white'/> <rect x= '0' y= '0' width= '175' height= '5' fill= 'white' /> <rect x= '5' y= '5' width= '170' height= '170' fill= 'teal' /> <rect x= '10' y= '10' width= '160' height= '160' fill= 'black' /> <rect x= '15' y= '15' width= '150' height= '150' fill= 'orange' /> <rect x= '20' y= '20' width= '140' height= '140' fill= 'black' /> <rect x= '25' y= '25' width= '130' height= '130' fill= 'teal' /> <rect x= '30' y= '30' width= '120' height= '120' fill= 'black' /> <rect x= '35' y= '35' width= '110' height= '110' fill= 'orange' /> <rect x= '40' y= '40' width= '100' height= '100' fill= 'black' /> <rect x= '45' y= '45' width= '90' height= '90' fill= 'teal' /> <rect x= '50' y= '50' width= '80' height= '80' fill= 'black' /> <rect x= '55' y= '55' width= '70' height= '70' fill= 'orange' /> <rect x= '60' y= '60' width= '60' height= '60' fill= 'black' /> <rect x= '65' y= '65' width= '50' height= '50' fill= 'teal' /> <rect x= '70' y= '70' width= '40' height= '40' fill= 'black' /> <rect x= '75' y= '75' width= '30' height= '30' fill= 'orange' /> <rect x= '80' y= '80' width= '20' height= '20' fill= 'black' /> <rect x= '85' y= '85' width= '10' height= '10' fill= 'teal' /> </svg> ");
}

<div class="container bg-repeating-squares"></div>

(I did alter your graphic to add 5px of white to the top and left to account for the 5px margin you were using)

<svg width="175" height="175" viewBox="0 0 175 175">
  <rect x="0" y="0" width="5" height="175" fill="white"/>
  <rect x="0" y="0" width="175" height="5" fill="white"/>
  <rect x="5" y="5" width="170" height="170" fill="teal"/>
  <rect x="10" y="10" width="160" height="160" fill="black"/>
  <rect x="15" y="15" width="150" height="150" fill="orange"/>
  <rect x="20" y="20" width="140" height="140" fill="black"/>
  <rect x="25" y="25" width="130" height="130" fill="teal"/>
  <rect x="30" y="30" width="120" height="120" fill="black"/>
  <rect x="35" y="35" width="110" height="110" fill="orange"/>
  <rect x="40" y="40" width="100" height="100" fill="black"/>
  <rect x="45" y="45" width="90" height="90" fill="teal"/>
  <rect x="50" y="50" width="80" height="80" fill="black"/>
  <rect x="55" y="55" width="70" height="70" fill="orange"/>
  <rect x="60" y="60" width="60" height="60" fill="black"/>
  <rect x="65" y="65" width="50" height="50" fill="teal"/>
  <rect x="70" y="70" width="40" height="40" fill="black"/>
  <rect x="75" y="75" width="30" height="30" fill="orange"/>
  <rect x="80" y="80" width="20" height="20" fill="black"/>
  <rect x="85" y="85" width="10" height="10" fill="teal"/>
</svg>