JS class callable generate svgs with circles without index out :-D

gistfile1.js

class GetSVGDot extends Function{
    dot_svgs = [];
    constructor(size) {
      super('return arguments.callee._call.apply(arguments.callee, arguments)');
      const dot_colors = ['#FF0000', '#FF8000', '#80FF00', '#000000', '#0000FF', '#0000FF', '#FFFF00', '#FF6600', '#00FF00', '#00FFFF', '#FF00FF', '#8000FF', '#6600FF', '#FF7D00'];
      let cont = 0;
      for(const dot_color of dot_colors) {
        this.dot_svgs.push(`<svg id='svg_circle_${cont}' width='${size}' height='${size}'>
                              <circle cx="12.5" cy="12.5" r="6.25" fill="${dot_color}">
                              </circle>
                            </svg>`);
      }
    }
    
    _call(...args) {
      let idx = 0;
      if(args.length !== 0) {
        idx = args[0];
      }
      
      return this.dot_svgs[idx % this.dot_svgs.length];
    }
  }
  let get_dot = new GetSVGDot(25);
  get_dot(120548); // safe

For the circle to keep its position an everything, all circle dimensions must be in proportion to size:
cx="${size/2}" cy="${size/2}" r="${size/4}"

And, the same class but as a function:

getSVGDot = function(size) {
    dot_svgs = [];
    const dot_colors = ['#FF0000', '#FF8000', '#80FF00', '#000000', '#0000FF', '#0000FF', '#FFFF00', '#FF6600', '#00FF00', '#00FFFF', '#FF00FF', '#8000FF', '#6600FF', '#FF7D00'];
    let cont = 0;
    let idx = 0;
    for(const dot_color of dot_colors) {
      dot_svgs.push(``<svg id='svg_circle_${cont++}' width='${size}' height='${size}'>
                            <circle cx="${size/2}" cy="${size/2}" r="${size/4}" fill="${dot_color}">
                            </circle>
                          </svg>``);
    }
  
    return function(){
      return dot_svgs[idx++ % dot_svgs.length];
    }
    
}(20)
console.log('=>', getSVGDot());