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

Pirate 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

Plunder

A key requirement fer the delivery be the ability to export both still images and videos o' th' logos fer use in printed media, commercials, TV broadcasts, and integrated on th' web.

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

Finally, we facilitated th' embedding o' a logo animation directly on a webpage using a simple embed code.

Thar Tournament

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

Durin' thar European Design Awards 2021, thar project won gold in thar categories "Motion Logo" and "Digital Miscellaneous". 🥳