Случайно разместить SVG полигон на странице загрузки

Question

У меня есть 6 шестиугольников SVG внутри div. Я хочу разместить эти SVG в произвольной позиции на каждой странице загрузки, а затем получить значения X и Y одного случайного SVG с помощью «getBoundingClientRect ()» и ДОБАВИТЬ эти значения в каждые 6 (X и Y) точек шестиугольника.

  .main{
       height:100vh;
       width:100%;
     }

 <div class="main">

      <svg id="color-fill"  width="30%" height="300">
     
      <polygon class="hex1" points="300,150 225,280 75,280 0,150 75,20 
      225,20">1</polygon>
        
      </svg>

      <svg id="color-fill"  width="40%" height="300">
     
      <polygon class="hex2" points="300,150 225,280 75,280 0,150 75,20 225,20">1</polygon>
        
      </svg>

      <svg id="color-fill" width="40%" height="300">
     
      <polygon class="hex3" points="300,150 225,280 75,280 0,150 75,20 225,20">1</polygon>
        
      </svg>

     <svg id="color-fill" width="40%" height="300">
     
      <polygon class="hex4" points="300,150 225,280 75,280 0,150 75,20 225,20">1</polygon>
        
      </svg>

      <svg id="color-fill"  width="40%" height="300">
     
      <polygon class="hex5" points="300,150 225,280 75,280 0,150 75,20 225,20">1</polygon>
        
      </svg>

      <svg id="color-fill"  width="40%" height="300">
     
      <polygon class="hex6" points="300,150 225,280 75,280 0,150 75,20 225,20">1</polygon>
        
       </svg>
    </div>