How to create an animated SVG from all the moves in a game?

[FowadIjaz]

Hi, I'm trying to create an animated SVG by looping over all moves in the game and saving a snapshot of each. I've thus far been able to save the static svgs in a folder labelled sequentially, like "svg1, svg2, etc"

My next step is to sort of stitch them together into an animated SVG so that it loops over all the moves and shows the whole game state changing over time, and then embed it into an HTML page... I'm sort of stuck on how to proceed after getting all the static svgs of a game however.

Instead of saving the svgs to a file, I thought about saving them as a variable, and then importing that variable to the html page so that I could render it using django. Does this seem workable? Has anybody done something similar before? Appreciate any advice.

Here is my code so far:

import chess
import chess.svg
import chess.pgn
import io
pgn = io.StringIO("""
1. d4 d5 2. Bf4 Nc6 3. e3 Bf5 4. Bb5 a6 5. Bxc6+ bxc6 6. c3 Rb8 7. b4 e6 8. Nf3
Bd6 9. O-O Nf6 10. Nbd2 O-O 11. Ne5 Bxe5 12. Bxe5 Ng4 13. h3 Nxe5 14. dxe5 Qg5
15. f4 Qg6 16. Nf3 Bxh3 17. Ng5 Bf5 18. g4 Be4 19. Nxe4 Qxe4 20. Qd4 Qg6 21.
Rab1 Qxg4+ 22. Kf2 Qh4+ 23. Ke2 f6 24. f5 Qh2+ 25. Rf2 Qh5+ 26. Ke1 fxe5 27.
Qxe5 Rbe8 28. Rg2 Qh1+ 29. Kf2 Qxb1 30. Qxg7# 1-0
""")

game = chess.pgn.read_game(pgn)

board = game.board()
for k, move in enumerate(game.mainline_moves()):
    board.push(move)


    white_attackers  = []
    for i in range(64):
        white_attackers.append(list(board.attackers(chess.WHITE, i)))

    black_attackers  = []
    for i in range(64):
        black_attackers.append(list(board.attackers(chess.BLACK, i)))

    net_attackers = []
    for i in range(64):
        net_attackers.append(len(white_attackers[i])-len(black_attackers[i]))


    green_palette = [
        '#a4fba6', '#4ae54a', '#30cb00', '#0f9200', '#006203','#006203','#006203'
        ]
    red_palette = [
        '#ffbaba', '#ffbaba', '#ffbaba', '#ff7b7b', '#ff5252', '#ff0000', '#a70000',
    ]

    palette_dict = {}
    for i, j  in enumerate(green_palette):
        palette_dict[i+1]= j
        palette_dict[-i]=red_palette[i]
        palette_dict[0]=""


    arrows = []
    for i in range(64):
        arrows.append(chess.svg.Arrow(i, i, color = palette_dict[net_attackers[i]]) )


    svg = chess.svg.board(
        board, 
        size = 500, 
        colors={}, 
        arrows = arrows,
        # squares = chess.SquareSet([chess.A8, chess.A1])
    )

    with open('svg/'+str(k)+'.svg', 'w', encoding='utf-8') as filename:
        filename.write(svg)

    drawing = svg2rlg('svg/'+str(k)+'.svg')
    renderPM.drawToFile(drawing, 'png/'+str(k)+".png", fmt="PNG")

Note that at the bottom, I am converting the SVGs to PNGs, but that doesn't seem to work for some reason, it leads to this sort of bleeding effect:

Saving SVGs in their native format does not have this problem.

[niklasf]

Hi, here are some references that might be helpful:

• Here's a GIF renderer for chessboards, offering an HTTP API: https://github.com/niklasf/lila-gif. However it does not support markers on the board.
• Here's a client side library for rendering chessboards: https://github.com/ornicar/chessground. It supports markers and piece animations.
• Here's a web service using python-chess to render static board images as SVG and PNG: https://github.com/niklasf/web-boardimage. It uses CairoSVG for SVG to PNG conversion and I have never seen it produce such rendering artifacts.

[SparkScratch-P]

How can I animate a series of vector graphics into one image - svg and animated!?