Let's move it with AI: World Cup Bracket animated. Missed the games? Here is how to create a neat recap with Claude. Dan Pereira found a great visualization of the elimination bracket from Emilio Sansolini on Instagram. (insta: emilionsansolini) Only problem? It's only an image. So lets move it with AI to visualize the entire progress of the elimination bracket. Sounds hard? It isn't. Here is how I did it: + upload the original static image to Claude (I used Fable 5) + ask it to create an html based animation of the progress based upon results + it researched the results online + created the animation directly + I then extracted the mp3 soundeffects + used suno to create the on beat music + a little bit of GPT-2 images of Teo It nailed it in one shot. However some finetuning to add the flags as well as the sound effects afterwards. Never been easier to make static move in a video first world! Want to try it yourself? Make the prompt yours: " Build a single self-contained HTML file (~800 lines, no dependencies, no server): an animated radial SVG knockout bracket for the FIFA World Cup 2026. **Layout:** 32 teams on the outer ring (radius 492), winners advancing inward across 5 rings (radii 420→336→252→168→86) to a trophy at center (600,600). Connector paths use radial elbows. Team name labels rotate outward; left-hemisphere labels flip text-anchor. viewBox="-75 -75 1350 1350". **Flags:** All 32 flags hand-drawn as inline SVG shapes on a 60×40 canvas (rect/polygon/circle/path — no emoji, no images). Clipped into circles for bracket chips via clipPath; rendered as small rounded-rect SVGs in the ticker and results log. **Animation per match:** (1) Green spotlight blooms at the active node. (2) Focus rings appear around both competing chips. (3) A score pill pops at the node — mini flags, scoreline with winner highlighted green, pens shown as "4–3p", springs in via cubic-bezier scale. (4) Winner path draws inward via stroke-dashoffset. (5) Loser branch fades. (6) Rings recolor gold/red. (7) Winner chip springs into next ring. Pill dismisses. **Sound:** Pure Web Audio (no files) — filtered noise whoosh on kick-off, two-note triangle blip on score reveal, pluck on advance, ascending chord on each new round, five-note arpeggio + shimmer for champion. Sound on/off toggle, unlocked on first click. **Data:** `TEAMS` object (32 codes, names, Elo ratings), `R32_ORDER` array (32 codes, consecutive pairs = R32 match slots), `REAL_RESULTS` array (`{round, m, a, b, sa, sb, pa?, pb?, date, note?}`) played in order — stops at the last entry with upcoming fixtures shown. Append new results to update. **Design:** Warm paper palette (--paper #EEE8DB, --ink #16130D, --pitch #157A3B, --gold #C09A2C), Barlow Condensed headlines, pill-shaped segmented controls. No frameworks, pure vanilla JS + SVG DOM + Web Audio. Anne-Sophie Pereira De Sá you might like this? (or not :))
This is such a cool idea for infographics. IYKYK it can be applied to charts/graphs and so much more!
Cool animation, but Emilio Sansolini is also on LinkedIn and deserves to be formally tagged in the OP.
Love the animation! Great one not only for football but also for any progressive data. Thanks for sharing
SURELY the Mexico vs England match deserves a mention!? 😉
You never cease to astound me Stefan Kirschnick
Woah... crazy, but fun, Stefan! I like the pop-ups in between. Did you add them in or were they naturally generated along the scene?