Optimizing repetition inside SVG with sprites

exported.svg

sprites.svelte

<script lang="ts">
  type Hexagon = ('none' | `#${string}`)[] & { length: 3 };
  const hexagons: Hexagon[] = [
    ['none', 'none', 'none'],
    ['#e7f3f9a5', '#e7f3f974', '#e7f3f93a'],
    ['#e7f3f999', '#e7f3f96b', '#e7f3f936'],
    ['#e7f3f9a3', '#e7f3f972', '#e7f3f939'],
    ['#e7f3f92b', '#e7f3f91e', '#e7f3f90f'],
    ['#e7f3f9d0', '#e7f3f991', '#e7f3f949'],
    ['#e7f3f97c', '#e7f3f957', '#e7f3f92b'],
    ['#e7f3f92e', '#e7f3f920', '#e7f3f910'],
    ['#e7f3f914', '#e7f3f90e', '#e7f3f907'],
    ['#e7f3f9d6', '#e7f3f996', '#e7f3f94b'],
    ['#e7f3f967', '#e7f3f948', '#e7f3f924'],
  ];

  type Row = number[] & { length: 25 };
  const rows: Row[] = [
    [0, 0, 1, 0, 2, 0, 3, 4, 0, 0, 0, 5, 6, 0, 0, 7, 5, 0, 0, 0, 0, 8, 0, 0, 9],
    [0, 0, 0, 0, 0, 5, 4, 0, 0, 5, 3, 5, 4, 0, 0, 10, 0, 0, 0, 0, 0, 5, 4, 0, 4],
    [0, 0, 3, 6, 5, 0, 5, 0, 0, 0, 0, 0, 4, 0, 3, 10, 5, 7, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 10, 0, 0, 0, 0, 5, 0, 0, 4, 0, 0, 3, 0, 7, 0, 5, 9, 4, 0, 10, 4, 0],
    [0, 0, 0, 5, 0, 0, 0, 0, 0, 6, 0, 0, 5, 0, 10, 0, 0, 0, 4, 0, 0, 0, 0, 0, 4],
    [3, 6, 3, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 4, 4, 0, 0],
    [6, 4, 0, 0, 5, 0, 9, 4, 0, 0, 0, 0, 6, 6, 6, 0, 0, 0, 3, 0, 7, 0, 0, 4, 0],
    [0, 0, 6, 4, 0, 5, 4, 0, 5, 4, 0, 5, 9, 0, 9, 4, 0, 0, 0, 0, 0, 5, 3, 0, 3],
    [0, 0, 6, 6, 0, 0, 0, 0, 0, 10, 6, 0, 5, 0, 0, 5, 0, 0, 3, 0, 0, 9, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 5, 0, 0, 10, 5, 5, 0, 4, 0, 0, 0, 0, 0, 5, 9, 0, 0, 0, 0],
    [6, 0, 0, 0, 0, 5, 3, 3, 4, 0, 0, 5, 0, 0, 0, 0, 0, 9, 0, 0, 0, 4, 0, 0, 0],
    [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 0, 3, 0, 4, 0, 0, 0, 0, 0, 0, 0],
    [10, 0, 0, 0, 0, 5, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 6, 10, 4, 0, 0, 6, 0],
    [5, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 10, 3, 4, 0, 0, 0, 0, 4, 0, 4, 0, 5],
  ];
</script>

<svg viewBox="0 0 2000 1000" xmlns="http://www.w3.org/2000/svg">
  <rect fill="#b0d9ec" width="2000" height="1000"></rect>
  <defs>
    {#each hexagons as [left, right, top], hexIndex}
      <g id="hex{hexIndex}">
        <path
          d="M0 0v46.134l39.998 23.068v-46.133L0 0Z"
          fill={left}
          stroke="#e7f3f9"
          stroke-width="2"
        ></path>
        <path
          d="M39.998 69.202 80 46.133V0l-40.002 23.069v46.133Z"
          fill={right}
          stroke="#e7f3f9"
          stroke-width="2"
        ></path>
        <path
          d="M0 0 39.998-23.064 80 0l-40.002 23.069L0 0Z"
          fill={top}
          stroke="#e7f3f9"
          stroke-width="2"
        ></path>
      </g>
    {/each}
    <radialGradient id="gradient-mask">
      <stop offset="0" stop-color="#fff"></stop>
      <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
    </radialGradient>
  </defs>
  <mask id="fade-mask">
    <path fill="url(#gradient-mask)" d="M0 0h2000v1000H0z"></path>
  </mask>
  <g mask="url(#fade-mask)" clip-rule="evenodd">
    {#each rows as row, rowIndex}
      {#each row as hexIndex, colIndex}
        <use
          href="#hex{hexIndex}"
          x={colIndex * 80}
          y={rowIndex * 69.333 + (rowIndex % 2 ? 0 : 23.317)}
        />
      {/each}
    {/each}
  </g>
</svg>

sprites.svg