<div id="shippou">
  <div id="back"></div>
  <div id="front"></div>
</div>
body {
  margin: 0;
  overflow: hidden;
}
#shippou {
  display: flex;
  position: relative;
}
#back {
  display: flex;
}
#front {
  display: flex;
  position: absolute;
  top: -40px;
  left: -40px;
}
.round {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #fcc800;
  margin: -2px 0 0 -2px; 
}
const backDiv = document.getElementById("back");
const frontDiv = document.getElementById("front");
const rowLength = window.innerWidth / 80;
const colLength = window.outerHeight / 80;
for (var i=0; i<rowLength; i++) {
  const backColElement = document.createElement("div");
  backColElement.setAttribute("id",`back-col${i+1}`);
  const frontColElement = document.createElement("div");
  frontColElement.setAttribute("id",`front-col${i+1}`);
  for (var j=0; j<colLength; j++) {
    const backRoundElement = document.createElement("div");
    backRoundElement.setAttribute("class","round");
    const frontRoundElement = document.createElement("div");
    frontRoundElement.setAttribute("class","round");
    backColElement.appendChild(backRoundElement);
    frontColElement.appendChild(frontRoundElement);
  }
  backDiv.appendChild(backColElement);
  frontDiv.appendChild(frontColElement);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.