Chess board images and puzzles
Put any chess position in a URL and get a board image back: rnbqkbnr.com/<fen> for an SVG, add .png for a PNG. Free to use, embed and share. There are also a few chess puzzles and toys.
SVG
Add a FEN after the domain: https://rnbqkbnr.com/rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR is the start position. A full FEN works too; everything after the board is ignored (…/RNBQKBNR w KQkq - 0 1). The slashes between ranks are optional.
PNG
Add .png to the end: https://rnbqkbnr.com/rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR.png. Use it anywhere that accepts an image link.
GIF
Make animated GIFs in the browser at rnbqkbnr.com/gif. Add a FEN and .gif to start from a position, e.g. rnbqkbnr.com/rnbqkbnr/ppppppp.gif. Download the GIF to share it.
Include chess-board.js (link it, or copy it to your server), then add <chess-board> elements anywhere in your HTML:
<chess-board fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR" arrows="e3e4 b1c3 g8f6" dark="blue" light="gray" border="12 black white"></chess-board>
- fen the position
- arrows 4-character moves (from square + to square), separated by spaces or commas
- dark / light square colours (any SVG colour)
- border width in points (a square is 45), then optionally the border colour and the text colour
Size and position it with CSS. See this repl for an example.
| Total | |
| PNG | |
| SVG |
| 50% | 90% | 95% | 99% | |
|---|---|---|---|---|
| PNG | ||||
| SVG |
| Yest. | Month | |
| PNG | ||
| SVG |
| Hour | |
| Day | |
| Month |
Requests today (rank) · all time (rank)
Made by TripleLog. I wrote a blog post about generating chess board images. Want more chess projects? Leave your email. More projects, code snippets and blog posts at triplelog.com.