Круги рандом на равных дистанциях

const root = document.getElementById("root");
 
const cities = ["LA", "Moscow", "Oslo", "Paris", "Barcelona", "La Spezia", "Munich", "Miami", "Gothenburg", "Copenhagen", "Bergen", "Stockholm", "Skagen", "Berlin", "Rome", "Marseille", "Helsinki", "New York", "Sao Paulo"];
const bubbles = [];
const placed = [];
const rootBounds = root.getBoundingClientRect();
const center = {
    x: rootBounds.width / 2,
  y: rootBounds.height / 2,
};
let startPoint = center;
 
const config = {
  trace: false,
  spiralResolution: 1,
  spiralLimit: 360 * 5,
  xPadding: 2,
  yPadding: 2,
};
 
// Make bubbles from cities
for (let i = 0; i < cities.length; i++) {
    const rank = Math.floor(Math.random() * 9) + 7;
  const b = document.createElement("div");
  b.className = "bubble";
  b.setAttribute("rank", rank);
  b.style.width = (rank / 2.5) + "rem";
  b.style.height = (rank / 2.5) + "rem";
  b.innerText = cities[i];
  b.style.position = "absolute";
  root.appendChild(b);
  bubbles.push(b);
}
 
// Sort by rank
bubbles.sort((a, b) => {
    return -1 * (parseInt(a.getAttribute("rank")) - parseInt(b.getAttribute("rank")));
});
 
// Draws spiral points
const traceCanvas = document.createElement("canvas");
traceCanvas.width = rootBounds.width;
traceCanvas.height = rootBounds.height;
const traceCanvasCtx = traceCanvas.getContext("2d");
root.appendChild(traceCanvas);
 
const setPos = (element, pos) => {
    root.appendChild(element);
  element.style.position = "absolute";
  const bounds = element.getBoundingClientRect();
  const x = pos.x - (bounds.width / 2);
  const y = pos.y - (bounds.height / 2);
  element.style.top = y + "px";
  element.style.left = x + "px";
  
  placed.push(element.getBoundingClientRect());
};
 
const trace = (x, y) => {
    //traceCanvasCtx.lineTo(x, y);
    //traceCanvasCtx.stroke();
    traceCanvasCtx.fillRect(x, y, 1, 1);
};
 
const spiral = (i, callback) => {
    angle = config.spiralResolution * i;
    x = (1 + angle) * Math.cos(angle);
    y = (1 + angle) * Math.sin(angle);
    return callback ? callback() : null;
};
 
const intersect = (bubble, pos) => {
    root.appendChild(bubble);    
    bubble.style.left = pos.x - bubble.offsetWidth / 2 + "px";
    bubble.style.top = pos.y - bubble.offsetHeight / 2 + "px";
    const currentBubble = bubble.getBoundingClientRect();    
    root.removeChild(bubble);
    
    // Check if it overflows container y aswell
    if (currentBubble.top < rootBounds.top + config.yPadding || 
            currentBubble.bottom > rootBounds.bottom - config.yPadding) {
      return true;
    }
    
    for (let i = 0; i < placed.length; i++) {
        const comparisonBubble = placed[i];
        if (!(currentBubble.right + config.xPadding < comparisonBubble.left - config.xPadding ||
             currentBubble.left - config.xPadding > comparisonBubble.right + config.xPadding ||
             currentBubble.bottom + config.yPadding < comparisonBubble.top - config.yPadding ||
             currentBubble.top - config.yPadding > comparisonBubble.bottom + config.yPadding)) {
            return true;
        }
    }
    
    return false;
}
 
 
(function placeBubbles() {
    bubbles.forEach(bubble => {
        for (let i = 0; i < config.spiralLimit; i++) {
            const callback = () => {
              const tryPos = { x: startPoint.x + x, y: startPoint.y + y };
              if (!intersect(bubble, tryPos)) {
                setPos(bubble, tryPos);
                return true;
              }
            };
            
            if (spiral(i, callback)) {
                break;
            }
        }
    })
})();
 
(function traceSpiral() {
    traceCanvasCtx.beginPath();
    
    if (config.trace) {
        let frame = 1;
 
        const animate = () => {
            spiral(frame, () => {
                trace(startPoint.x + x, startPoint.y + y);
            });
            
            frame++;
            
            if (frame < config.spiralLimit) {
                window.requestAnimationFrame(animate);
            }
        }
        
        animate();
    }
})();
 
// Spiral code adapted from https://codepen.io/stevn/pen/JdwNgw