for (let x = 0; x < this.chunkCols; x++) {
for (let y = 0; y < this.chunkRows; y++) {
const image = this.add
.image(x * CHUNK_WIDTH, y * CHUNK_HEIGHT, `${x}_${y}`)
.setOrigin(0)
.setDisplaySize(CHUNK_WIDTH, CHUNK_HEIGHT);
2 вариант: "просто" свг не учитывает вариант где кнопка зависит от размера контента, либо это просо не указано в комменте, да и сам вариант "просто свг" может под собой подрузмевать что угодно. Последний раз когда я делал подобные фигуры на свг, то мне приходилось учитывать масштабирование и там были какие то формулы, что-то еще, я делал по какой то статье, которую сейчас уже не смог найти, но это было едиственно решение которое мне помогло.
3. Псевдо в цвет фона тоже не универсальное решение так как зависит от фона
Я понимаю что все это не учтено в вопросе. но каждый раз когда я встречаю подобный вопрос я думаю именно об этом, понятно что есть решения проще/костыльнее/лишь бы работало, но по факту задачу грамотно они нникак не решают, а примеров нет, ничего нет, есть просто ответ "ну просто свг или просто clip-path", и так из раза в раз, хотя если человек это спрашивает, то есть шанс что он уже это попробовал (опять же не указано в вопросе да, но все равно)
Конкретно решение с clip-path:
Может я ошибаюсь и уже забыл конечно, но оно тоже не позволяет масштабировать блок и обрезки clip-path в зависимости от размера контента, и либо углы уедут и поменяют свой угол либо что-то еще.
Опять же без негатива, я ничего не предъявляю или что-то еще, но просто мой взгляд.