JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clock" ></div>

JavaScript

paper = new Raphael('clock', 500, 500);

var r2 = 10;
var padding = 20 + r2/2;
circle = paper.circle(50, 50, 40);
circle.node.id = "clock";
circle.attr({
    stroke: "#f00"
});
var graydots = [];
graydots[0] = paper.circle(circle.attrs.cx - circle.attrs.r + padding, circle.attrs.cy, r2 );
graydots[1] = paper.circle(circle.attrs.cx + circle.attrs.r - padding, circle.attrs.cy, r2 );
graydots[2] = paper.circle(circle.attrs.cx, circle.attrs.cy + circle.attrs.r - padding, r2 );
graydots[3] = paper.circle(circle.attrs.cx, circle.attrs.cy - circle.attrs.r + padding, r2);;

for(var i=0,l=graydots.length;i<l;i++)
    graydots[i].attr('fill','#000');