Champions Chess Tour Logogenerator
Together with Schjærven Reklamebyrå, we developed a logo generator for Play Magnus and Chess24's new online initiative - Champions Chess Tour.
Schjærven developed the visual concept for the Champions Chess Tour in 2020. Central to the visual profile was the idea that the logo should be a visual representation of a specific chess game, capturing the drama move by move and forming a unique visual pattern. The logo consists of an 8x8 grid representing the chessboard, with the moves drawn in their actual positions. Through gradients, a sense of direction is created, and over time, old moves gradually fade out to give a sense of progression.
The designers at Schjærven had already created a sketch of the logo, but manually placing all the moves in Adobe Illustrator was time-consuming. In addition, there was a need for animated versions for use on the web, in films, and in TV broadcasts.
Technology
- Vue
- GSAP
- ffmpeg
- Slim
- Netlify
![](https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=c9646e13581c5895548c911e43d322d8 600w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=942a2dc5f5c16ddf6070fb1c25ca500e 800w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=bf6f41500aaa342e9b36a90418d3f09c 1000w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=3e271631e10a54f8af5def81aa2c72d5 1200w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f84cd42a5f0b2986b106620ba64a22f3 1400w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=eb5448d776154569c1c1f405de62d9a1 1600w, https://vrsgdweb.imgix.net/images/projects/cct-thumb.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=0e61e28ddc8b15bf75fe55be8a4a8bb3 1800w)
Generators
Fortunately, chess players are nerds too! 🤓 Already in 1993, a file format was 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 was 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.
![](https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=ffd52c8660430dd6bb22652a24d8fea0 600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=d9b82e1fb936f59cbf28219fdd8263ca 800w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=64d63d2878c2259f665658eb9ce81382 1000w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=2b53358ca5475cbd4fe4ba1875d7f652 1200w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f85bc6b6db01119b6c1337a5209a7944 1400w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=96d01d7cf3e686ecc42de3feb4ac40fd 1600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FLww01m01P2Wdz3E6Al1yv8zrjMvC00Z2V01EO97DTQDOsxw%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=eb8ea93fe6a576459561c9d9207e39a4 1800w)
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.
![](https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=8ea0f78d68a12c97d1f9ac5042fcc42a 600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=eecc8960dff39fbc5936fd6ad653f062 800w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=04aad78c3f814d4bfbd4273ac664c8a1 1000w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=a1f423208fb2e7979932d3f39b4cd962 1200w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=2d486655e1a2e46ecb4c449beba96ba7 1400w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=56a28c56f202c9345e2d684fae5e99c2 1600w, https://vrsgdproxy.imgix.net/https%3A%2F%2Fimage.mux.com%2FWMTB9FXRD00IsGd3hcCuC2WUy6ScIMuyDa5igX02dH93Y%2Fthumbnail.jpg%3Ftime%3D0%26fit_mode%3Dpreserve?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=46ecdae0000cc173e81a99c1a8160d3e 1800w)
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". 🥳
![](https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=1643ce0c0614aa9c1781597941419b28 600w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=de0b06cd3eb3a6c0888de898c22b5f9c 800w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=db46cf46b206783430000b0cf4553ebe 1000w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=c334a95d089f7124e614f13d5070957a 1200w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=f8301121aa3f824f1082d3e08d9a9988 1400w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=3e4b76783f404bcac23a9699a4406ede 1600w, https://vrsgdweb.imgix.net/images/projects/cct/635b8e5fda088a8bfa19e308_ChampionsChessTour_billboard-1_51625850f4fa83f32ffd3bda70c1f3a6.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=392a10da8d6ef6f3df1ff83febc5b547 1800w)
![](https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=600&s=da0388de23e99ea257693f357dbdecb5 600w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=800&s=11aa9c26b53063a5e288c2dc0c394625 800w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1000&s=817fa3a831dfde38493478c088176963 1000w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1200&s=249b325fb071a41b73e00785a84071a8 1200w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1400&s=1f39a034741d06fbc0a53da687d1c5c4 1400w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1600&s=f3fb772f07a0f64e11897850f6432a16 1600w, https://vrsgdweb.imgix.net/images/projects/cct/cct-tournament-logos.jpg?auto=compress%2Cformat&cs=srgb&fit=clip&q=80&w=1800&s=6749ec0647633029ac367757b16917d2 1800w)