Single Elimination Tournament Bracket (SVG Implementation)

Every week during quarantine, my friends and I nominate films to collectively watch. We go through single elimination rounds of voting to ultimately choose one. I made this doc to make that process easy, straightforward and fun.

Thanks to @Paul_Danyliuk for figuring SVG implementation in Coda, I’m able to generate a tournament bracket graphic that automatically generates based on the number of contestants and updates as you play through the tournament. This doc can handle any number of contestants up to at least 256.

It’s a work in progress. I still want to implement a voting system. But right now it’s good enough for one person to run during the weekly movie bracket.

Quick basic tutorial:

  1. The Tournament page is the hub for all the tournament features.

  2. “Current Contest” is the main page for running and watching the tournament. This is where you can see what films are competing next, decide the winner, and click the small bracket graphic to see a big version.

  3. The “Bracket” page is simple. It’s just a dedicated view of the bracket.

  4. The “Seed Contestants” page is where you input all of the films that are competing in the tournament. The “Seed Contestants” button at top will randomly seed all the contestants. If a film has multiple nominations you can enter the number of nominations in the “Advantage” column, and it will receive higher seeding. Then press “Reset Bracket” to clear the current bracket followed by “Enter Bracket” to begin the newly seeded tournament.

  5. The “Database” tab holds all the background info and tables that are generating the competition. The way I have it set up is that all the film titles live in the Film Database. Here they automatically pull in info from Wikipedia which is where their photos come from in the Current Contest. You could also list the the streaming platform for each film so that info is easy to recall at any stage of the tournament.

There’s a bit more to it than that, but hopefully that’s a sufficient primer. Enjoy!


Wow…incredible. Well done.

1 Like

Looks really cool! Make it more colorful though! Ah, I see it has some colors. Found how to use it, awesome stuff!

@BenLee has also made a bracket doc (can’t find it), but it was not with SVG but with… vanilla tables and some clever conditional formatting :slight_smile: Worth linking here too.

1 Like

Haha it’s true though. It could be WAY more colorful. I played it safe with this one. Just dipping my toes into the big wide world of SVG. to the rescue :slight_smile:

I love this doc! It makes decision making fun :slight_smile:

28 Days Later was the winner for me!

1 Like

After much tinkering, I’m publishing a finished version of this doc. Check it out!

(Hopefully, I’ve ironed out all kinks. Let me know if you stumble across any bugs.)