Javascript 如何定义具有间距和重复的点

我想画点或圆如何有一个边界，这是圆或点。如何定义间距和重复。请看我的照片

    <div class="dots1"></div>
    <div class="dots2"></div>
    <div class="dots3"></div>

重复用于8倍和50px间距 您可以使用css网格实现这一点

身体{ 利润率：40像素； } .包装纸{ 显示：网格； 网格模板柱：1fr 1fr 1fr； 网格模板行：repeat8，50px； 栅隙：50px； } .盒子{ 填充：10px； 字体大小：150%； 显示器：flex； 对齐项目：居中； 证明内容：中心； } 多特先生{ 背景色：000； 宽度：30px； 高度：30px； 边界半径：50%； }

  :root {
      --diameter1: 0px;
      --diameter2: 0px;
      --diameter3: 0px;


.dots1, .dots2, .dots3 {
  border-image:url('border-image.png') 8 repeat;
  position: fixed;
  bottom: 0px;
  top: 50px;
  background: rgba(80, 219, 229,0.25);
  transform: translateY(50);
}


.dots1 {


}

.dots2 {

}

.dots3 {

}