2D-Wheel 1.00

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle of Divs</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }

      .stage {
        width: 90vh;
        padding-bottom: 90vh;
        margin: 2vh;
        max-width: 90vh;
      }

      .item {
        
        font-size: 1.3em;        
      }
    </style>

    <script>
      function create_divStage() {
        const divStage = document.createElement('div');
        divStage.className = 'stage';
        divStage.innerHTML = '';
        divStage.style.position = 'relative';
        divStage.style.backgroundColor = elementOptions.stage.backgroundColor;
        document.body.appendChild(divStage);
        return divStage;
      }

      function positionDivsInCircle(elementOptions, parentDiv) {
        let itemSize, itemDistance;
        let numItems = elementOptions.numItems;
        if (numItems <= 1) { itemSize = 30, itemDistance = 15 }
        else if (numItems <= 5) { itemSize = 20, itemDistance = 4 }
        else if (numItems <= 10) { itemSize = 15, itemDistance = 3 }
        else if (numItems <= 20) { itemSize = 7.0, itemDistance = 2.7 }
        else if (numItems <= 30) { itemSize = 6.0, itemDistance = 2.6 }
        else if (numItems <= 40) { itemSize = 5.0, itemDistance = 2.4 }
        else if (numItems <= 50) { itemSize = 4.0, itemDistance = 2.3 }
        else if (numItems <= 60) { itemSize = 3.5, itemDistance = 2.2 }
        else if (numItems <= 70) { itemSize = 3.0, itemDistance = 2.1 }
        else if (numItems <= 80) { itemSize = 2.7, itemDistance = 2.07 }
        else if (numItems <= 90) { itemSize = 2.5, itemDistance = 2.05 }
        else if (numItems <= 100) { itemSize = 2.3, itemDistance = 2.03 }
        else if (numItems <= 120) { itemSize = 2.2, itemDistance = 2.01 }
   ...

JavaScript

//console.log(document.querySelector('.circle-container').style.width);