JSFiddle - React, Tailwind, and code Playground

by ineffable p

HTML

Number of fields: <input type="text" value="60" />
<div id="container">
    <div id="center"></div>
    
</div>

CSS

body { padding: 2em; }

#center { 
    position:absolute;
    background: #00A8D9;
    width: 50%;
    height: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
    top:55%;
    left:27%;
}
.field { width: 20px; height: 20px; position: absolute; color: #f00; }

JavaScript

function createFields() {
    $('.field').remove();
    var container = $('#container');
    for(var i = 0; i < +$('input:text').val()+1; i++) {
        $('<div/>', {
            'class': 'field',
            'text': i 
        }).appendTo(container);
    }
}

function distributeFields() {
    
    
    var fields = $('.field'), container = $('#container'),
        width = center.width()*2, height = center.height()*2,
        angle = 0, step = (2*Math.PI) / fields.length;
    var radius = width/2;
    var containerLength=$('input:text').val();
    angle=step* (containerLength-1);
   
    fields.each(function() {
        
        var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
            $(this).css({
            right: x + 'px',
            top: y + 'px'
        });
        angle -= step;
        
    });
}
 var center = $('#center');

$(window).resize(function(height) {
   
    $('#container').width($(window).height()*0.9)
    $('#container').height($(window).height()*0.9)
    var width = $('#container').width() * 0.4;
     console.log("width",$('#container').width());
    console.log("height",$('#container').height());
    var radius = width/2;
    width += 'px';
    radius += 'px';
    center.css({
        width: width, height: width,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });
    
createFields();
distributeFields();
    // rest of your code for font-size setting etc..
});

$(window).resize();


$('input').change(function() {
    createFields();
    distributeFields();
});