JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<div class="entitywrapper">
<div class="entity" data-entityid="0">Copernica</div>
<div class="entity" data-entityid="1">Facebook</div>
<div class="entity" data-entityid="2">Magento</div>
<div class="entity" data-entityid="3">Twitter</div>
</div>

CSS

.entitywrapper {
    width:500px;
    height:500px;
    float:left;
    border-radius:500px;
    border:1px solid red;
    margin:40px 0 0 40px;
    position:relative;
}
.entity {
    position:absolute;    
    width:50px;
    border-radius:50px;
    display:block;
    background:rgba(199,210,100,0.6);
    padding:20px;
}

JavaScript

var wrapper = $(".entitywrapper");
var entities = $(".entitywrapper .entity");
var entityCount = entities.length;
var omtrek = wrapper.height() * 2 + wrapper.width() * 2;
var spacing = omtrek / entityCount;
var startH = 0;
var startW = wrapper.width() / 2;
var counter = 0;
var angles = 360 / entityCount;
$.each(entities, function(index) {
    var curEntity = $(entities[index]);
    var myPos = 
    setTimeout(function() {
        
        curEntity.animate({ top: (startH - (curEntity.height() / 2)) + "px", left: (startW - (curEntity.width() / 2)) + "px"}, 300);
    }, counter * 500);
    
    counter++;
});