JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle"></div>

CSS

*, ::before, ::after {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
}
#circle {
    position:relative;

width: 22px;
height: 22px;
background: #582B00;

}
span {
    position:absolute;
    display:block;
    width:4px;
    height:4px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi4xMC4xOKXW34YAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAdklEQVQokZWSQRGEMBAEGwxcJCABCUi6c4AUJEQKOEBCUND3SaqAByT97tmpmlrIqLOavJLURQ2cUaPP7Op4vlzDqoZOTcCHOn6daqUMsLUG6FvkEjga/KMHYkMgooa88xtJHQBQx7zzkzxdunLT9xYsrzEU7w/qU/QLrEfN7gAAAABJRU5ErkJggg==');
-webkit-background-size: 4px 4px;
background-size: 4px 4px;
}

JavaScript

circle = $('circle');
border = circle.getStyle('border-width').toInt();
width = circle.getStyle('width').toInt() - (border*2);
height = circle.getStyle('height').toInt() - (border*2);
dot = 4;
c = (width-dot)/2; //center
    r = (height-dot)/2;  // 半径
    a = 360/8;  // 角度（度）
X = [];
Y = [];
for (var i = 0; i < 8; i++ ) {
    x = r * Math.cos((-a * i) / 180 * Math.PI) * -1;  // X座標
    y = r * Math.sin((-a * i) / 180 * Math.PI) * -1;  // Y座標
    
    x = Math.floor(c +x);
    y = Math.floor(c +y);
    X.push(x + 'px');
    Y.push(y + 'px');
    new Element('span', {styles:{'top':x, 'left':y}}).inject(circle);
    }
    console.log("x",X.join(','));
    console.log("y",Y.join(','));