JSFiddle - React, Tailwind, and code Playground

by venkatesh pappu

HTML

<input type="text" id="NoOfCircles" placeholder="Enter no of circles">
<div class='circle-container'>
</div>

CSS

.circle {
    width:1em;
    height:1em;
    border-radius:50%;
}
.circle-container {
    position: relative;
    width: 12em;
    height: 12em;
    padding: 0.5em;
    /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: solid 1px green;
    border-radius: 50%;
    margin: 1.75em auto 0;
}
.circle-container div {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    height: 4em;
    margin: -2em;
    /* 2em = 4em/2 */
    /* half the width */
}

JavaScript

$(function () {
    /* add onchange listener */
    $("#NoOfCircles").change(function () {
        /* get the value in the textbox */
        var noOfCircles = $("#NoOfCircles").val();
        /* equally divide 360 by the no of circles to be drawn */
        var degreeAngle = 360 / noOfCircles;
        /* get handle on the wrapper canvas */
        var wrapper = $(".circle-container");
        /* clear it first */
        wrapper.html("");
        /* initialize angle incrementer variable */
        var currAngle = 0;
        /* draw each circle at the specified angle */
        for (var i = 0; i < noOfCircles; i++) {
            /* add to the wrapper */
            wrapper.append(getDiv(currAngle));
            /* increment the angle incrementer */
            currAngle = currAngle + degreeAngle;
        }

    });
    /*
        Function returns a new DIV with the angles translation using CSS.
        It also applies a random color for fun.
        stole the CSS from :http://stackoverflow.com/questions/12813573/position-icons-into-circle
    */
    function getDiv(currAngle) {
      
      if(currAngle == 0) {
            return "<div class='circle' style='transform: rotate(" + currAngle + 						"deg) translate(6em) rotate(-" + currAngle + "deg);background-color:" 					 + "'><img 		src='https://i1.wp.com/visualcppconcepts.files.wordpress.com/2015/12/rsz_file-page67.jpg?w=450'></div>"
      }
       if(currAngle == 90) {
            return "<div class='circle' style='transform: rotate(" + currAngle + 						"deg) translate(6em) rotate(-" + currAngle + "deg);background-color:" 					 + "'><img 		src='https://i1.wp.com/visualcppconcepts.files.wordpress.com/2015/12/rsz_file-page52.jpg?w=450'></div>"
      }
	 if(currAngle == 180) {
            return "<div class='circle' style='transform: rotate(" + currAngle + 						"deg) translate(6em) rotate(-" + currAngle + "deg);background-color:" 					 + "'><img...