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.

Puzzles and games
Board images

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.

Web component

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.

Last hour
Total
PNG
SVG
Render time (µs)
50%90%95%99%
PNG
SVG
History
Yest.Month
PNG
SVG
GIFs created
Hour
Day
Month
Popular positions

Requests today (rank) · all time (rank)

About

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.