I really like this board game from the 1960s called TwixT. I’ve never played the physical board game, but my friend and I used to play it on pen and paper more than a decade ago. I’ve only had the opportunity to play it a couple of times since then.

The rules (for the pen and paper version) are relatively simple. The game is played by two players. The only equipment needed is a printed board and two differently coloured writing implements, like a blue and a red pen.

Each player’s goal is make a continuous line between opposite sides of the board. Players take alternating turns claiming a point on the grid by colouring it in. They can then optionally connect that point to any other of their claimed point that are a knight’s move away from it. In the pen-and-paper version, a player’s lines can never intersect another player’s lines, but they can intersect their own (though it doesn’t connect them at that intersection).

For fun, I decided to implement a printable board for playing it on pen and paper using SVG. The backend of my website is built using Phlex, so I built this as a simple view component that renders the whole HTML page, which just contains a single SVG.

class TwixtView < ApplicationView
  # Register SVG elements.
  register_element :rect
  register_element :circle

  def template
    doctype

    html do
      body do
        svg width: size, height: size do
          rect(
            width: "100%",
            height: "100%",
            fill: "none",
            stroke: "black",
            stroke_width: "1"
          )

          (0...grid_size).each do |x|
            (0...grid_size).each do |y|
              circle(
                cx: x * board_size / (grid_size - 1) + (size - board_size) / 2,
                cy: y * board_size / (grid_size - 1) + (size - board_size) / 2,
                r: "1.25",
                fill: "white",
                stroke: "black",
                stroke_width: "0.33"
              )
            end
          end

          rect(
            x: (size - game_size) / 2,
            y: (size - game_size) / 2,
            width: game_size,
            height: game_size,
            fill: "none",
            stroke: "black",
            stroke_width: "2",
            transform_origin: "center",
            transform: "rotate(-26.6)"
          )
        end
      end
    end
  end

  private

  def size = 800

  def game_size = size / 1.7

  def board_size = size / 6 * 5

  def grid_size = 24
end

You can find the result here. The layout matches the one labeled as “Diagonal Twixt version 2” on Wikipedia. I’ve not yet tested printing it, so your mileage may vary, but I’m sure I’ll sort that out shortly.