Как сделать соты, наполненные мелкими бороздками? ⇐ CSS

[Anonymous]

Пытаюсь воспроизвести заполнение экзагона маленькой альвеолой. Я попробовал использовать чистый CSS, но мне это не удалось. Я смотрю на такое меню и вижу перевод в CSS. Но это хорошо, если у вас маленькая и предсказуемая альвеола.
Я пробую с помощью JavaScript

Код: Выделить всё

html {
background-color: yellow;
}

#honeypond {
width: 300px;
height: 300px; /* Adjust according to the desired height */
background-color: #FFF;
position: relative;
overflow: hidden; /* Clip the contents to the hexagonal shape */
margin: 0 auto; /* Center the container horizontally */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#honeypond::before,
#honeypond::after {
content: "";
display: table;
clear: both;
}

.alveolus {
background-color: transparent;
position: absolute;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
cursor: pointer;
}

.alveolus:hover {
border: 1px solid #000000;
}


document.addEventListener("DOMContentLoaded", function () {
const honeypond = document.getElementById("honeypond");
const canvas = document.getElementById("honey-canvas");
const ctx = canvas.getContext("2d");
const alveolSide = 30;
const myarr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

var maxColumn = honeypond.offsetWidth / alveolSide; var middlecolumn = maxColumn / 2;
var y = 0; var idxcol = 0; var row = 0;
myarr.forEach(function (val) {
var xTopRow = row % 2 === 0 ? (honeypond.offsetWidth - alveolSide) / 2 : honeypond.offsetWidth / 2;//decale pour imbriquer
var x = idxcol 

Подробнее здесь: [url]https://stackoverflow.com/questions/78467120/how-do-a-honeycomb-filled-by-small-alvelous[/url]