<div class="frame">
  <div class="container">
    <div id="one-one">
     <svg height="180" width="180">
        <circle cx="90" cy="90" r="90" fill="#fff"/>
        <circle cx="90" cy="90" r="50" fill="#231f20"/>
      </svg> 
    </div>
    <div id="one-two"></div>
    <div id="one-three">
      <svg height="180" width="180">
        <polygon points=" 0 0, 30 0, 90 60, 150 0, 180 0, 180 30, 120 90, 180 150, 180 180, 150 180, 90 120, 30 180, 0 180, 0, 150, 60 90, 0 30" fill="#FFF"></polygon>
      </svg>
    </div>
    <div id="two-one"></div>
    <div id="two-two"></div>
    <div id="two-three"></div>
    <div id="three-one">
      <svg height="180" width="180">
        <polygon points="0 0, 180 0, 180 180, 120 180, 120 120, 60 120, 60 60, 0 60" fill="#fff"></polygon>
      </svg>
    </div>
    <div id="three-two">
      <div class="circles"></div>
    </div>
    <div id="three-three">
      <svg height="180" width="180">
        <circle cx="90" cy="90" r="90" fill="#fff"/>
      </svg>
    </div>
    <div id="four-one"></div>
    <div id="four-two"></div>
    <div id="four-three"></div>
  </div>
</div>

<a href="http://www.aa13.fr/visionneuse-min?id=21460&img=4" target="_blank">original</a>

body {
  background: black;
}

.frame {
  display: grid;
  justify-content: center;
}

.container {
  width: 900px;
  height: auto;
  box-sizing: border-box;
  border: 20px solid white;
  background: #231f20;
  /*   padding: 265px 120px; */
  display: grid;
  grid-template-columns: 80px repeat(3, 180px) 80px;
  grid-template-rows: 265px repeat(4, 180px) 265px;
  grid-gap: 40px;
}

#one-one {
  grid-row: 2;
  grid-column: 2;
}

#one-two {
  grid-row: 2;
  grid-column: 3;
  background: #d8d8d8;
}

#one-three {
  grid-row: 2;
  grid-column: 4;
}

#two-one {
  grid-row: 3;
  grid-column: 2;
  background: repeating-linear-gradient(
    -30deg,
    #fff,
    #fff 8px,
    #231f20 8px,
    #231f20 16px
  );
}

#two-two {
  background: #fff;
  grid-row: 3;
  grid-column: 3;
}

#two-three {
  grid-row: 3;
  grid-column: 4;
  background: repeating-linear-gradient(
    0deg,
    #fff,
    #fff 2px,
    #231f20 2px,
    #231f20 5px
  );
}

#three-one {
  grid-row: 4;
  grid-column: 2;
}

#three-two {
  grid-row: 4;
  grid-column: 3;
  background-color:;
background-image: radial-gradient(#fff 3px, transparent 3px);
background-size:12px 12px;
background-position: 0 0, 180px 180px;
}
}

.circles {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSczJyBjeT0nMycgcj0nMycgZmlsbD0nYmxhY2snLz4KPC9zdmc+Cg==");
  background-repeat: repeat;
}

#three-three {
  grid-row: 4;
  grid-column: 4;
}

#four-one {
  grid-row: 5;
  grid-column: 2;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 2px,
    #231f20 2px,
    #231f20 5px
  );
}

#four-two {
  grid-row: 5;
  grid-column: 3;
  border: 40px solid white;
}

#four-three {
  grid-row: 5;
  grid-column: 4;
  background: repeating-linear-gradient(
    90deg,
    #fff,
    #fff 2px,
    #231f20 2px,
    #231f20 5px
  );
}

a {
 color: white;
  font-family: Arial;
  font-size: 12px;
  float: right;
}

@media all and (max-width: 800px) {
  .container {
    transform: scale(.65);
    margin-top: -200px;
    grid-template-rows: 100px repeat(4, 180px) 65px;
  }
}

@media all and (max-width: 600px) {
  .container {
    transform: scale(.4);
    margin-top: -300px;
  }
}