title: How to create a function that stacks arches side by side (forming a circle)?
body: <p>I want to create a function that stacks arches in the following fashion:</p>
  
  <p><a href="https://i.stack.imgur.com/WUFRC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WUFRC.png" alt="enter image description here"></a></p>
  
  <p>(This is a simplified version. In the real app, there could be more arches.)
  Each arch has a <code>length</code> of <code>42</code>. The <code>rotation</code> that places the arch in the upper center is <code>158</code>.</p>
  
  <p>I'm very bad at math, so this is all I could come up with:</p>
  
  <pre><code>positionArches () {
    const archWidth = 42
    const arches = [
      { name: 'arch1', rotation: 0 }, // must change the rotation
      { name: 'arch2', rotation: 0 },
      { name: 'arch3', rotation: 0 }
    ]
    if (this.isOdd) {
      // 1 arch: [158]
      // 3 arches: [158 - archLength, 158, 158 + archLength] // smaller to larger
    } else {
      // 2 arches: [158-(archLength/2), 158+(archLength/2)]
    }
  }
  </code></pre>
  
  <p>But I don't know how to continue. Any ideas?</p>