div.content

  - for (var x = 1; x < 145; x++) 

    div.dot

body {

    margin: 0;

    height: 100vh;

  background: #8bc34a;

  display: flex;

    justify-content: center;

    align-items: center;

}

.content {

  width: 90vmin;

  height: 90vmin;

  margin: 0 auto;

  justify-content: center;

  align-items: center;

  display: inline-flex;

  flex-wrap: wrap;

  align-content: center;

}

​

.dot {

  background: #2345ff;

  display: inline-block;

  border-radius: 100%;

  box-shadow: 0 -0.5vmin 0 0 #fff, 0 0.5vmin 0 0 #000;

  width: 5.5%;

  height: 5.5%;

  margin: 1.175%;

}

​

.dot:nth-child(1), .dot:nth-child(13n+1) {

  transform: rotate(-27deg);

}

​

.dot:nth-child(2), .dot:nth-child(13n+2) {

  transform: rotate(-55deg);

}

​

.dot:nth-child(3), .dot:nth-child(13n+3) {

  transform: rotate(-83deg);

}

​

.dot:nth-child(4), .dot:nth-child(13n+4) {

  transform: rotate(-110deg);

}

​

.dot:nth-child(5), .dot:nth-child(13n+5) {

  transform: rotate(-137deg);

}

​

.dot:nth-child(6), .dot:nth-child(13n+6) {

  transform: rotate(-164deg);

}

​

.dot:nth-child(7), .dot:nth-child(13n+7) {

  transform: rotate(-191deg);

}

​

.dot:nth-child(8), .dot:nth-child(13n+8) {

  transform: rotate(-218deg);

}

​

.dot:nth-child(9), .dot:nth-child(13n+9) {

  transform: rotate(-245deg);

}

​

.dot:nth-child(10), .dot:nth-child(13n+10) {

  transform: rotate(-272deg);

}

​

.dot:nth-child(11), .dot:nth-child(13n+11) {

  transform: rotate(-300deg);

}

​

.dot:nth-child(12), .dot:nth-child(13n+12)  {

  transform: rotate(-327deg);

}

​

.dot:nth-child(13), .dot:nth-child(13n+13)  {

  transform: rotate(-360deg);

}

​