Creates an svg dot grid in React

dotgrid.js

import React from 'react';

export default ({
  width = 10,
  height = 10,
  space = 10,
  radius = 1.5,
  fill = '#000',
}) => {
  const viewWidth = width * radius * 2 + (width - 1) * (space - radius * 2);
  const viewHeight = height * radius * 2 + (height - 1) * (space - radius * 2);
  let dots = [];

  for (let indexWidth = 0; indexWidth < width; indexWidth++) {
    for (let indexHeight = 0; indexHeight < height; indexHeight++) {
      dots.push(
        <circle
          key={`${indexWidth}-${indexHeight}`}
          cx={radius + indexWidth * space}
          cy={radius + indexHeight * space}
          r={radius}
        />
      );
    }
  }

  return (
    <svg
      width={viewWidth}
      height={viewHeight}
      viewBox={`0 0 ${viewWidth} ${viewHeight}`}
      version="1.1"
    >
      <g fill={fill}>{dots}</g>
    </svg>
  );
};

output.svg

<svg width="93" height="93" viewBox="0 0 93 93" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><circle cx="1.5" cy="1.5" r="1.5"></circle><circle cx="1.5" cy="11.5" r="1.5"></circle><circle cx="1.5" cy="21.5" r="1.5"></circle><circle cx="1.5" cy="31.5" r="1.5"></circle><circle cx="1.5" cy="41.5" r="1.5"></circle><circle cx="1.5" cy="51.5" r="1.5"></circle><circle cx="1.5" cy="61.5" r="1.5"></circle><circle cx="1.5" cy="71.5" r="1.5"></circle><circle cx="1.5" cy="81.5" r="1.5"></circle><circle cx="1.5" cy="91.5" r="1.5"></circle><circle cx="11.5" cy="1.5" r="1.5"></circle><circle cx="11.5" cy="11.5" r="1.5"></circle><circle cx="11.5" cy="21.5" r="1.5"></circle><circle cx="11.5" cy="31.5" r="1.5"></circle><circle cx="11.5" cy="41.5" r="1.5"></circle><circle cx="11.5" cy="51.5" r="1.5"></circle><circle cx="11.5" cy="61.5" r="1.5"></circle><circle cx="11.5" cy="71.5" r="1.5"></circle><circle cx="11.5" cy="81.5" r="1.5"></circle><circle cx="11.5" cy="91.5" r="1.5"></circle><circle cx="21.5" cy="1.5" r="1.5"></circle><circle cx="21.5" cy="11.5" r="1.5"></circle><circle cx="21.5" cy="21.5" r="1.5"></circle><circle cx="21.5" cy="31.5" r="1.5"></circle><circle cx="21.5" cy="41.5" r="1.5"></circle><circle cx="21.5" cy="51.5" r="1.5"></circle><circle cx="21.5" cy="61.5" r="1.5"></circle><circle cx="21.5" cy="71.5" r="1.5"></circle><circle cx="21.5" cy="81.5" r="1.5"></circle><circle cx="21.5" cy="91.5" r="1.5"></circle><circle cx="31.5" cy="1.5" r="1.5"></circle><circle cx="31.5" cy="11.5" r="1.5"></circle><circle cx="31.5" cy="21.5" r="1.5"></circle><circle cx="31.5" cy="31.5" r="1.5"></circle><circle cx="31.5" cy="41.5" r="1.5"></circle><circle cx="31.5" cy="51.5" r="1.5"></circle><circle cx="31.5" cy="61.5" r="1.5"></circle><circle cx="31.5" cy="71.5" r="1.5"></circle><circle cx="31.5" cy="81.5" r="1.5"></circle><circle cx="31.5" cy="91.5" r="1.5"></circle><circle cx="41.5" cy="1.5" r="1.5"></circle><circle cx="41.5" cy="11.5" r="1.5"></circle><circle cx="41.5" cy="21.5" r="1.5"></circle><circle cx="41.5" cy="31.5" r="1.5"></circle><circle cx="41.5" cy="41.5" r="1.5"></circle><circle cx="41.5" cy="51.5" r="1.5"></circle><circle cx="41.5" cy="61.5" r="1.5"></circle><circle cx="41.5" cy="71.5" r="1.5"></circle><circle cx="41.5" cy="81.5" r="1.5"></circle><circle cx="41.5" cy="91.5" r="1.5"></circle><circle cx="51.5" cy="1.5" r="1.5"></circle><circle cx="51.5" cy="11.5" r="1.5"></circle><circle cx="51.5" cy="21.5" r="1.5"></circle><circle cx="51.5" cy="31.5" r="1.5"></circle><circle cx="51.5" cy="41.5" r="1.5"></circle><circle cx="51.5" cy="51.5" r="1.5"></circle><circle cx="51.5" cy="61.5" r="1.5"></circle><circle cx="51.5" cy="71.5" r="1.5"></circle><circle cx="51.5" cy="81.5" r="1.5"></circle><circle cx="51.5" cy="91.5" r="1.5"></circle><circle cx="61.5" cy="1.5" r="1.5"></circle><circle cx="61.5" cy="11.5" r="1.5"></circle><circle cx="61.5" cy="21.5" r="1.5"></circle><circle cx="61.5" cy="31.5" r="1.5"></circle><circle cx="61.5" cy="41.5" r="1.5"></circle><circle cx="61.5" cy="51.5" r="1.5"></circle><circle cx="61.5" cy="61.5" r="1.5"></circle><circle cx="61.5" cy="71.5" r="1.5"></circle><circle cx="61.5" cy="81.5" r="1.5"></circle><circle cx="61.5" cy="91.5" r="1.5"></circle><circle cx="71.5" cy="1.5" r="1.5"></circle><circle cx="71.5" cy="11.5" r="1.5"></circle><circle cx="71.5" cy="21.5" r="1.5"></circle><circle cx="71.5" cy="31.5" r="1.5"></circle><circle cx="71.5" cy="41.5" r="1.5"></circle><circle cx="71.5" cy="51.5" r="1.5"></circle><circle cx="71.5" cy="61.5" r="1.5"></circle><circle cx="71.5" cy="71.5" r="1.5"></circle><circle cx="71.5" cy="81.5" r="1.5"></circle><circle cx="71.5" cy="91.5" r="1.5"></circle><circle cx="81.5" cy="1.5" r="1.5"></circle><circle cx="81.5" cy="11.5" r="1.5"></circle><circle cx="81.5" cy="21.5" r="1.5"></circle><circle cx="81.5" cy="31.5" r="1.5"></circle><circle cx="81.5" cy="41.5" r="1.5"></circle><circle cx="81.5" cy="51.5" r="1.5"></circle><circle cx="81.5" cy="61.5" r="1.5"></circle><circle cx="81.5" cy="71.5" r="1.5"></circle><circle cx="81.5" cy="81.5" r="1.5"></circle><circle cx="81.5" cy="91.5" r="1.5"></circle><circle cx="91.5" cy="1.5" r="1.5"></circle><circle cx="91.5" cy="11.5" r="1.5"></circle><circle cx="91.5" cy="21.5" r="1.5"></circle><circle cx="91.5" cy="31.5" r="1.5"></circle><circle cx="91.5" cy="41.5" r="1.5"></circle><circle cx="91.5" cy="51.5" r="1.5"></circle><circle cx="91.5" cy="61.5" r="1.5"></circle><circle cx="91.5" cy="71.5" r="1.5"></circle><circle cx="91.5" cy="81.5" r="1.5"></circle><circle cx="91.5" cy="91.5" r="1.5"></circle></g></svg>