<!-- 250 -->

<svg id="svg" viewBox="0 0 1800 400">
  <defs>
    <symbol id="line">
       <path d="M10,0 10,400" 
        stroke="red" 
        stroke-width="2" 
        stroke-dasharray="220, 70, 130" />
    </symbol>
  </defs>
  
<rect ry="10" width="100%" height="100%" fill="transparent" stroke="#000" stroke-width="1"/>
  
<use href="#line" x="0" y="0" />

  <g class="section" style="transform: translateX(20px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect  x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>
  
  <use href="#line" x="245" y="0" />
  
  <g class="section" style="transform: translateX(270px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>
  
  <use href="#line" x="495" y="0" />
  
  <g class="section" style="transform: translateX(520px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>
  
  <use href="#line" x="745" y="0" />
  
  <g class="section" style="transform: translateX(770px)">
    <g>
      <rect x="0" y="6"/>
      <rect x="0" y="120"/>
      <rect x="120" y="6"/>
      <rect x="120" y="120"/>
    </g>
    <g>
      <rect x="0" y="294"/>
      <rect  x="120" y="294"/>
    </g>
  </g>
  
<use href="#line" x="995" y="0" />
 
  
</svg>

let size = 100;
let rad = 10;

document.querySelectorAll(".section").forEach(function (el){


  el.querySelectorAll("rect").forEach(function (rect){
    rect.style.cssText = `fill: transparent; stroke: red; stroke-width: 1px; width: ${size}px; height: ${size}px`;
    rect.setAttribute("ry", rad);
  })
})