Oof that's a rough title.

I want to create a UI element in which I display a list of users around a circle. I can create n user elements onto the page, and put them all at a fixed point (e.g., the origin of the circle). What I'd like to do from there is add a style tag that takes the index of that user, and spits out an x translation and a y translation to put them onto said circle (which effectively is a polygon of sides n). Obviously, the radius of the circumcircle would be known, I guess hardcoded to some pixel value.

Here is an illustration of what I mean:

I have accomplished what is effectively the same end-result by positioning each element at the top of the circle and giving it a height equal to the diameter of the parent/container, effectively creating a long stick with the content at the tip, whic is then rotated by an angle equal to its index * (360/array.length), the code for that (in Vue format) looking like:

   <div id='circle'>
        <div 
        class='user'
        v-for='user, i in users'
        :key='i'
        :style='`transform: rotate(${(360/this.users.length) * i}deg)`'>
            <div :style='`transform: rotate(${-1 * (360/this.users.length) * i}deg)`'>
                <span>{{user.displayName}}</span>
                <img :src='user.image' />
            </div>
        </div>
    </div>

...

<style lang='scss'>
    #circle {
        background-color: green;
        height: 500px;
        width: 500px;
        border-radius: 50%;
        position: relative;

        .user {
            position: absolute;
            width: 100px;
            height: 100%;
            top: 0;
            left: 200px;
            display: flex;
            flex-direction: column;
            color: white;

            img {
                height: 100px;
            }
        }
    }
</style>

with the result being (hideous green background for context):

However, I think this solution is less elegant and will make it hard to reformat at different screen sizes. And ultimately, I'm just super curious if the original method is doable in JavaScript, as I was unable to figure it out.