A formation with its lineup
A position nobody stands on is hollow.
Soccer pitch Drawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: Formation 4-2-3-1: 11 positions. Positions: Goalkeeper, Right back, Right centre-back, Left centre-back, Left back, Right defensive midfielder, Left defensive midfielder, Right winger, Attacking midfielder, Left winger, Striker. Players: Okafor (Goalkeeper), Haas (Right back), Ito (Left back), Silva (Striker). Four defenders, two holding midfielders, three behind a lone striker. Formation 4-2-3-1: 11 positions Positions: Goalkeeper, Right back, Right centre-back, Left centre-back, Left back, Right defensive midfielder, Left defensive midfielder, Right winger, Attacking midfielder, Left winger, Striker. Players: Okafor (Goalkeeper), Haas (Right back), Ito (Left back), Silva (Striker). Four defenders, two holding midfielders, three behind a lone striker. Goalkeeper: Okafor 1 Right back: Haas 2 Right centre-back Left centre-back Left back: Ito 3 Right defensive midfielder Left defensive midfielder Right winger Attacking midfielder Left winger Striker: Silva 9 1 Okafor 2 Haas 3 Ito 9 Silva The picture above was drawn when the docs were built. The script below draws it again with the published package.
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
const lineup = [["GK", 1, "Okafor"], ["RB", 2, "Haas"], ["LB", 3, "Ito"], ["ST", 9, "Silva"]].map(([position, number, name]) => ({ position, number, name }));
const svg = drawKyogijo({ sport: "soccer", layers: [{ kind: "formation", formation: "4-2-3-1", team: "home", data: lineup, names: true }] });This page imports the package from jsDelivr (major version 0), which serves only versions that have been published to npm. A feature added after the last release is not in it: the page then keeps the picture above and says why. The docs were built from version 0.6.1.