Я пытаюсь создать интерактивную сетку для веб-игры (HTML, JS и т. Д.), В которой каждая ячейка должна менять свою заливку при наведении / клике. Мне нужна как правильная квадратная сетка, так и треугольная сетка. Я хочу, чтобы он был векторным, чтобы он хорошо масштабировался, чтобы соответствовать разным размерам экрана. Я думал, что самый простой способ будет создать шаблон и залить его в прямоугольник. Это код, который я до сих пор:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>

Для квадрата, а это для треугольной сетки:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>

Они производят сетки, которые мне нужны, но я не знаю, как нацелить каждую ячейку индивидуально. Полагаю, поскольку я не нашел никакой информации по этому поводу, это просто невозможно, и нужно использовать какое-то другое решение, кроме того, которое следует использовать. Есть идеи?

Изменить: я хочу, чтобы иметь возможность циклически проходить различные заливки по щелчку мыши. Для квадратной сетки я использую код, который нашел здесь:http://bl.ocks.org/bunkat/2605010 но для треугольной решетки я абсолютно не знаю, с чего начать. Вот почему я подумал.

PS: я, наверное, должен добавить, что у меня нет опыта программирования, я пытаюсь сделать игру без грамматики, чтобы научить себя немного Javascript.