This repl creates GIFs of chess moves.

Visit the index.html file to create a GIF. Add moves by clicking a piece and then its destination. Doing this will add the move in UCI notation to the dashboard on the left. If you want to promote a piece then add the letter of the new piece as the 5th character of the move. There is no attempt to make sure moves are legal.

Change the various settings in the dashboard and click play animation to see the current animation on the board. Click Create GIF to create a GIF and once it is done click the download GIF link that will appear and save it or upload it somewhere to share.

You can make some change to the SVG or the CSS within the SVG in index.html to change the style. The script.js file creates the board and captures events. The animations.js file powers the animations and needs to be rewritten for clarity but mostly works. The compress.js file runs the gif through gifsicle to significantly reduce file sizes.

Read this blog post about creating the chess board images, visit rnbqkbnr.com to express your support for this project and signup for updates, and/or check out more of my projects at triplelog.com.