GridGame

by InfinitiesLoop

HTML

<div id="world" style="width:200px; height:200px;">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="cell" width="100" height="100" patternUnits="userSpaceOnUse" class="worldCell">
        <path d="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>

    <g class="worldGrid">
    <rect width="100" height="100" />
    <rect width="100" height="100" x="100" />

    <rect width="100" height="100" y="100" />
    <rect width="100" height="100" y="100" x="100" />
    </g>
  </svg>
</div>

CSS

.worldGrid rect {
  fill: url(#cell);
}

.worldGrid rect:hover {
  fill: gray;
}