title: Position multiple div elements around the circle like clock
body: <p>I am trying to position elements around the circle like we usually have on an analogue clock. I have set the angles for every element now task is to align it around the circle. The starting point of placing element would be <code>120deg</code> The following image is kind of expected result.</p>
  
  <p><a href="https://i.stack.imgur.com/tLkVP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLkVP.png" alt="enter image description here"></a></p>
  
  <p>This is what I have written so far. <a href="https://jsfiddle.net/zqbjd91L/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>But I am not able to think further at this point. From CSS aspect I think we need position <code>absolute</code> and <code>right</code> and <code>bottom</code> properties but the values of <code>bottom</code> and <code>right</code> would be calculated based on some algorithm.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var numberOfElement = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
  var initialRender = numberOfElement.slice(0, 13);
  
  function renderAngle(data) {
    var angles = [120];
    data.forEach(function(item, index) {
      angles.push(angles[index] + 20);
    })
    return angles;
  }
  
  function generateHtml() {
    var html = '';
    var angles = renderAngle(initialRender);
    var shapeType = 1;
    angles.forEach(function(item, index) {
      html += '&lt;div class="shape-' + shapeType + '" style="transform:rotate(' + item + 'deg)"&gt; ' + item + ' &lt;/div&gt;';
      shapeType++;
      if (shapeType &gt; 9) {
        shapeType = 1;
      }
    })
    document.querySelector('.circle').innerHTML = html;
    console.log('item', html)
  }
  generateHtml()</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
  
  .circle {
    background: red;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    position: relative;
  }
  
  .shape-1 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-2 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-3 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-4 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-5 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-6 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-7 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-8 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  .shape-9 {
    width: 5px;
    height: 50px;
    background: green
  }
  
  
  .as-console-wrapper { max-height: 3em !important; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="circle"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>