Just to exercise my CSS skills, I decided to see if it is possible in modern web browsers to draw a resizable Twixt board with just HTML and CSS – no JavaScript, no images, and no SVG. Turns out, the answer is yes.

https://codepen.io/ahensel/pen/xxPRbwb

(You may have to prove you're not a robot first. Twixtbot doesn't get to see this!)

The crucial diagonals have some issues in Firefox, but it seems to work great in Chrome and Safari. I have only tested on a Mac. Just drag the handle in the lower right to resize.

This is just a code sample. Free, open-source, no license or copyright.

This is very cool, thanks! Using Brave, I can resize up to 36 rows, but no farther unless I remove some toolbars or do a negative zoom. I cannot add pegs. Are you planning further improvements?

Using Brave under Linux Mint, the last column is not labeled. Instead, a clickable up/down arrow is there, on the top and on the bottom. Size 24, for example, shows this when I click.

I rebooted and still got the same behavior on Brave. I tried Firefox, and initially at least, it shows the last column correctly. I believe that at first, the Brave display was working fine. I don't know how I triggered this strange behavior.

Oh, that is weird. The columns show up as A-X for me… I suspect a scrolling issue. But it's not the end of the list either, as I allowed for 96 columns. AU=47, BR=70. Did you scroll it? I guess I went out on a limb with modern CSS. Browsers are still converging on standards. There are all kinds of odd behaviors. Those letters are in a css grid, just because it was the easiest way to get the letters centered perfectly over the holes. Maybe that was a mistake. Maybe flexbox would have been better. Or maybe the grid css can be fixed.

To answer your earlier question, no, I am not planning further improvements. Part of the reason for putting it out there is precisely that I am done. I proved my hypothesis: it can be done in just HTML/CSS. It's actually not that hard to draw a resizable Twixt board if you allow yourself SVG and JavaScript. Also, another reason for putting it out there is that if people are interested, they can provide contributions and fixes. Maybe someone with a better sense of design will draw a more beautiful board. Or fix the diagonals in Firefox. Or the column headers in Brave. Or something I haven't thought of.

Great piece of nerdiness! Thanks a lot Alan for your work for the community.

Looks very nice, and I'm especially impressed by how the diagonals are handled! Great work!