<div id="shippou"></div>
body {
  margin: 0;
  overflow: hidden;
}

.row {
  display: flex;
}

.left-leaf {
  width: 40px;
  height: 40px;
  background: #fcc800;
  border-radius: 100% 0;
}

.right-leaf {
  width: 40px;
  height: 40px;
  background: #fcc800;
  border-radius: 0 100%;
}
const parentDiv = document.getElementById("shippou");
const rowLength = window.innerWidth / 80;
const colLength = window.outerHeight / 40;
for (var i=0; i<colLength; i++) {
  const rowElement = document.createElement("div");
  rowElement.setAttribute("class","row");
  for (var j=0; j<rowLength; j++) {
    const leftElement = document.createElement("div");
   leftElement.setAttribute("class", "left-leaf");
    const rightElement = document.createElement("div");
   rightElement.setAttribute("class", "right-leaf");
    if (i % 2 === 0) {
      rowElement.appendChild(leftElement);
     rowElement.appendChild(rightElement);
    } else {
     rowElement.appendChild(rightElement);
    rowElement.appendChild(leftElement);
    }
  }
  parentDiv.appendChild(rowElement);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.