Champions Chess Tour Logogenerator

Schjærven developed th' visual concept fer th' Champions Chess Tour in 2020. Central t' th' visual profile be th' idea that th' logo should be a visual representation o' a specific chess game, capturin' th' drama move by move and formin' a unique visual pattern. Th' logo consists o' an 8x8 grid representin' th' chessboard, wit' th' moves drawn in their actual positions. Through gradients, a sense o' direction be created, and over time, old moves gradually fade out t' give a sense o' progression.

Th' designers at Schjærven had already created a sketch o' th' logo, but manually placin' all th' moves in Adobe Illustrator be time-consumin'. In addition, there be a need fer animated versions fer use on th' web, in films, and in TV broadcasts.

Tech

Vue
GSAP
ffmpeg
Slim
Netlify

Awards

Generators

Fortunately, chess players be nerds too! 🤓 Already in 1993, a file format be created to represent a chess game, Portable Game Notation (PGN). Along with chess.js, an opensource JavaScript library for reading and validating chess moves, we quickly had an engine to play through the moves in a chess game.

The next (and biggest) challenge be to recreate the visual expression that Schjærven had created in a way that allowed us to both extract a still image from a given move, and an animation showing all or parts of a game. We decided to draw the moves on a canvas element and use GSAP to build timelines for the different moves and the game as a whole. This made it possible to generate bitmap versions of the logo up to 32767x32767 pixels from any point in the game. 😲

We wrapped it all in a Vue application to control all the different parameters in the engine. With the help of the application, designers at Schjærven and Chess24 can easily and enjoyably experiment their way to final logo versions for the different games.

Test a simplified version of the generator here

Export

A key requirement for the delivery was the ability to export both still images and videos of the logos for use in printed media, commercials, TV broadcasts, and integrated on the web.

While still images practically created themselves (canvas.toDataURL() 🎉), we had to build a separate server application to assemble the videos. We settled on using the micro-framework Slim as a lightweight and efficient layer over ffmpeg, which handled the heavy lifting. This made it possible to export the finished films in optimized formats such as MP4/h264 for direct use on the web, and in high-quality formats like Prores 4444 for further productions.

Finally, we facilitated the embedding of a logo animation directly on a webpage using a simple embed code.

The Tournament

The Champions Chess Tour gathered the entire world elite in chess in its first season. With five million hours watched and 19.5 million live views, it became the most-watched online chess tournament of all time. Additionally, the tournament was broadcasted on countless TV stations and promoted in various media.

During the European Design Awards 2021, the project won gold in the categories "Motion Logo" and "Digital Miscellaneous". 🥳