function dot(x, y, radius, color) {

  const el = document.createElement('div');

  const size = `${radius * 2}px`;

  Object.assign(el.style, {

    position: 'absolute', 

    left: `${x}px`,

    top: `${y}px`,

    width: size,

    height: size,

    transform: `translate(${-radius}px, ${-radius}px)`,

    borderRadius: '50%',

    background: color

  });

  el.classList.add('dot');

  document.body.appendChild(el);

  return el;

}

dot(100, 100, 10, 'red');

dot(200, 100, 5, 'blue');

for (let i = 0; i < 20; i++) {

  dot(20 + i * 12, 200, 5, `hsl(${i * 10}deg, 60%, 50%)`)

}