Создание повторяющегося шаблона из 9-ти кругов. Один круг в центре, и по четыре круга в каждой вершине и по середине сторон

const svgId = 'campus_map';
const width = document.getElementById(svgId).viewBox.baseVal.width;
const height = document.getElementById(svgId).viewBox.baseVal.height;
let draw = Snap("#tiles");
let c = 0;
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];
let svg = document.getElementById(svgId);
for (let i = 0; i <= width; i = i + size) {
    for (let j = 0; j <= height; j = j + size) {
        c += 1;
        let rect = draw.rect(i, j, size, size);
        rect.attr({
            fill: "#d00bf3",
            "fill-opacity": 0.2,
            stroke: "#000",
            "stroke-width": "1px",
            id: "rect_" + c,
            name: "rect" + c
        });
        
        // Теперь сделайте еще один цикл, чтобы создать девять кругов
        // Похоже, вы хотите, чтобы круги был ВНУТРИ прямоугольника
        // поэтому вам нужно отодвинуть от углов прямоугольника на
         // радиус.
        
        // Расстояние между кругами равно размеру квадрата - два радиуса.
        // затем разделить пополам
        let circleSpacing = (size - circleSize * 2) / 2;
        // Верхний левый круг - это один радиус внутри верхнего левого квадратного угла.
        let circleStartX = i + circleSize;
        let circleStartY = j + circleSize;
        for (let i2 = 0; i2 < 3; i2++) {
            for (let j2 = 0; j2 < 3; j2++) {
                c += 1;
                let circle = draw.circle(circleStartX + i2 * circleSpacing, circleStartY + j2 * circleSpacing, circleSize);
                circle.attr({
                    fill: circleColor[0],
                    "fill-opacity": 1,
                    stroke: "#000",
                    "stroke-width": "1px",
                    id: "circle1_" + c,
                    name: "circle1_" + c
                });
            }
        }
    }
}

<script src="https://unpkg.com/[email protected]"></script>

<svg viewBox="0 0 8204.08 6413.17" version="1.1" id="campus_map"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

    <g id="tiles"></g>
</svg>

<svg width="100%" height="100%" version="1.1"  viewBox="0 0 800 800" 
      xmlns="http://www.w3.org/2000/svg" >
       <defs>
      <pattern id="myPattern"
             x="0" y="0" width="40" height="40"
             patternUnits="userSpaceOnUse" >
                 <rect x="0" y="0" width="40" height="40" fill="#F6CEFD" stroke-width="0.5" stroke="black" />
             <g stroke="none"  > 
                   <!-- Центральный круг -->
               <circle cx="20" cy="20" r="3" fill="#0051FF"/>
                        <!-- Верх середина -->
                <circle cx="20" cy="0.5" r="3" fill="#000"/>
                        <!-- Низ середина -->
                <circle cx="20" cy="40" r="3" fill="#000"/>
                        <!-- слева середина -->
                <circle cx="0" cy="20" r="3" fill="#00FFE1"/> 
                        <!-- справа середина -->
                <circle cx="40" cy="20" r="3" fill="#00FFE1"/>  
                         <!-- левый верхний угол -->
                <circle cx="0" cy="0" r="3" fill="#FF0000"/>
                         <!-- левый нижний  угол -->
                <circle cx="0" cy="40" r="3" fill="#FF0000"/>
                         <!-- правый верхний  угол -->
                <circle cx="40" cy="0" r="3" fill="#FF0000"/>
                         <!-- правый нижний  угол -->
                <circle cx="40" cy="40" r="3" fill="#FF0000"/>
             </g>
         </pattern>
              
  </defs>  
               <!-- Заполнение прямоугольника паттерном -->
      <rect x="0" y="0" width="100%" height="100%"
         style="stroke: #000000; fill: url(#myPattern);" /> 
 </svg>