Sensible XI icon

Sensible XI

Sensible XI puts two soccer formations on one pitch, in the style of the 1990s top-down soccer games. Pick a shape for each side and it shows the top strengths and weaknesses of each, marked on the pitch where they happen, then one line on how the home side wins and one on how the away side wins. Nineteen formations, from the 2-3-5 to the 4-2-3-1, give 190 face-offs.

A retro soccer screen titled SENSIBLE XI, The Battle of Formations. On a top-down pitch with advertising boards and EUFA CHAMPIONS CUP along both touchlines, Black Eagles of Istanbul line up in a 4-3-3 against Skull Pirates of Hamburg in a 5-3-2. The strength Wingers stretch the defence is highlighted: the rest of the pitch dims, the three Black Eagles forwards are ringed and two green areas mark the gaps inside the wingers. Side panels list each team's strengths and weaknesses, and a Formations Face-Off below the pitch explains how each side wins.
Open Sensible XI

What problem does it solve?

Formation talk usually comes as a list of numbers and a lot of opinion. Sensible XI puts two shapes on the same pitch so you can see them. Each side shows its top strengths and weaknesses, and the face-off below the pitch says in one line how each formation beats the other.

How it works

Pick a formation for the home team and one for the away team, with the arrows or from the list. The players move into their spots on a horizontal pitch. Hover a strength or weakness to see it on the pitch: the players involved light up, the space they win or leave is shaded, and arrows show the runs that matter. Choose a club for each side, from 51 teams across 14 countries with suitably bent names, or build a custom kit from sixteen colours and six shirt patterns. Step through nine pitches, from classic stripes to mud, snow and astroturf, and click the boards to change the competition.

Whom it’s for

Soccer fans who argue about shapes, coaches who want a quick picture for a team talk, and anyone who grew up on top-down soccer games.

Tech

Plain JavaScript, HTML and CSS, with no framework. The pitch is a canvas drawn pixel by pixel at its real proportions, 105 by 68 metres. The players are original 8 by 12 pixel sprites, and the titles use a pixel font drawn for the project. GSAP handles the motion, from the opening line-up to the highlights fading in.

Frequently asked questions

What is Sensible XI?

A soccer formation comparer drawn like a 1990s top-down soccer game. Pick two formations and see how they match up.

Which formations are included?

Nineteen, from modern shapes such as the 4-3-3, 4-2-3-1 and 3-5-2 to the classics, including the 2-3-5, the W-M, the Metodo and Catenaccio.

Can I pick my own team?

Yes. Choose one of 51 clubs from 14 countries, or make a custom team with its own name, shirt pattern and colours.

What do the pitch highlights show?

Hover a strength or weakness and the pitch marks where it happens. The players involved light up, the space they win or leave is shaded, and arrows show the runs that matter.

Where do the matchups come from?

From a close reading of soccer tactics books, rewritten in plain language. Every one of the 190 pairings gets one line for each side.