How to draw 16 smaller hexagons tangent with each of the lines of a larger hexagon using SVG?

I wanted to try drawing a large hexagon and 96 smaller hexagons inside it in groups of 16 hexagons aligned with each of the lines of the bigger hexagon with 1px padding between the larger and smaller hexagons and a small padding between each hexagon but I can’t seem to get the math right.

I was able to draw everything I needed in roughly the correct position, but they don’t align and I could only get the lines of the larger hexagon to cross the smaller ones, instead of being external to them.

const PADDING = 4;
const HEX_SIZE = 9 - PADDING; // decrease the hex size by padding value
const sqrt3 = Math.sqrt(3);

function createHexagon(x, y, radius) {
  const points = [];
  for (let i = 0; i < 6; i++) {
    const angle = 2 * Math.PI / 6 * i;
    const pointX = x + radius * Math.cos(angle);
    const pointY = y + radius * Math.sin(angle);
    points.push([pointX, pointY]);
  }
  return points;
}

const svg = d3.select('#hexagonSVG');

function createHexagonLine(startX, startY, angle, count) {
  // Draw a reference line
  svg.append('line')
    .attr('x1', startX)
    .attr('y1', startY)
    .attr('x2', startX + (sqrt3 * HEX_SIZE + PADDING) * count * Math.cos(angle))
    .attr('y2', startY + (sqrt3 * HEX_SIZE + PADDING) * count * Math.sin(angle))
    .attr('stroke', 'black')
    .attr('stroke-width', 1);

  for (let i = 0; i < count; i++) {
    const x = startX + (sqrt3 * HEX_SIZE + PADDING) * i * Math.cos(angle);
    const y = startY + (sqrt3 * HEX_SIZE + PADDING) * i * Math.sin(angle);
    const hexagonPoints = createHexagon(x, y, HEX_SIZE);
    svg.append('polygon')
      .attr('points', hexagonPoints.join(' '))
      .attr('class', 'small');
  }
  return [startX + (sqrt3 * HEX_SIZE + PADDING) * 16 * Math.cos(angle), startY + (sqrt3 * HEX_SIZE + PADDING) * 16 * Math.sin(angle)]
}

l = createHexagonLine(260, 140 + 2 * HEX_SIZE, 0, 16)
x = l[0]
y = l[1]
for (let i = 1; i < 6; i++) {
  const angle = 2 * Math.PI / 6 * i;
  l = createHexagonLine(x, y + 2 * HEX_SIZE, angle, 16);
  x = l[0]
  y = l[1]
}

svg {
  background: #ddd;
}

.small {
  fill: #666;
  stroke: #333;
  stroke-width: 1px;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="hexagonSVG" width="800" height="800"></svg>

Result