用圆圈填充div。 CSS还是SVG？

Question

我目前正在开发一个网站，我希望开场div（将填满屏幕）填充我可以通过CSS控制和动画的圆圈。我的第一种方法是在HTML中创建它们，如下所示，但最终看起来像很多代码。然后我考虑在插图画家中创建一个svg并针对不同的路径。但是，SVG的大小为1mb。我只是想知道你们认为这样做的最佳方式是尽可能减少它的最小化程度？

我100％确定你可以在Javascript中做这样的事情，但我对该语言一无所知。

<div class="circles" >
  <div class="circle-cluster"  data-center="transform:translate(0px, 0px)" data-bottom-top="transform:translate(0px, 500px)">
    <div class="circle" ></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px) rotate(-90deg)" data-bottom-top="transform:translate(0px, 200px) rotate(-90deg)" >
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px) rotate(-90deg)" data-bottom-top="transform:translate(0px, 300px)rotate(-90deg)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px);rotate(180deg)" data-bottom-top="transform:translate(0px, -200px);rotate(180deg)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px)" data-bottom-top="transform:translate(0px, 50px)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px)rotate(180deg)" data-bottom-top="transform:translate(0px, 450px)rotate(180deg)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px)rotate(180deg)" data-bottom-top="transform:translate(0px, 450px)rotate(180deg)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px)rotate(180deg)" data-bottom-top="transform:translate(0px, -300px)rotate(180deg)">
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px);rotate(180deg)" data-bottom-top="transform:translate(0px, 350px);rotate(180deg)">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="circle-cluster" data-center="transform:translate(0px, 0px)rotate(180deg)" data-bottom-top="transform:translate(0px, 300px)rotate(180deg)">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>