A 2D representation of a Tak board in HTML and CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



A representation of a Tak board in 2D.

Click here to see the half-implemented current state.

My goal

The ability to represent Tak board states in two dimensions for use in implementing online games.

Board states are generated by tak-game.

My priorities

  • the board state should be obvious without having to click or hover. You should be able to print it out and put it in a newspaper as a puzzle.
  • an abstract board sticking faithfully to two dimensions, no faking 3D with shadows or angles
  • at a very quick glance, you should be able to see which squares are owned by which player
  • at a slightly longer glance you should notice where standing stones and capstones are
  • should look good

I need help!

I'll try to make something reasonable, but I would love help from the Tak community.

Open Github issues or ping me on Twitter if you have any questions or ideas.

If you come up with a design that you think looks reasonable, open a pull request, I want to see it!

To implement your own designs

You'll need node.js installed.

git clone https://github.com/TehShrike/tak-board.git
npm install
npm run watchjs
npm run watchcss # in another tab

Open up index.html in your browser to see how it looks.

Edit board.html and board-style.css to change the design. The mustache-style templating is rendered by Ractive.

If you want to try a different board, edit the board state at the top of index.js.


  • plop in more than one view of the same board state, with different template/css files for each
  • to try: left half stack, right half top-piece
  • to try: stack, with top piece in the center
  • to try: stack, with top piece in border and standing stone/capstone in center