Kyogijo Stadiums競技場

Guides, the reference, a gallery of every picture it can draw, and how it compares: the pages are made from the package's own files when the site is built.

About the name

The pages are in English; this contents, the search and the buttons are in Japanese.

Gallery: flags on the halves

Each team's flag or crest laid large over its half of the surface, as a stadium does for a final's ceremony: as a carpet, or on a round stage, with an emblem in the centre. The nations, flags and cup are made up, and drawn in the code under each picture. The pictures share one stylesheet, which is left out of each one's SVG here; drawKyogijo puts it in every drawing unless style: "none" says not to.

A carpet on every surface#

pageant: "carpet" lays each flag at its own ratio, with a dark border and a gentle fabric of light and shade. A diamond's home team is on the infield and the visitors are in the outfield; a curling sheet has a flag in each house. Where the plate would cost the carpets their size the score goes to the strip.

NFL field, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARA102030405040302010010203040504030201AUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nfl", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

CFL field, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a Canadian football field, 150 by 65 yards with its 20-yard end zones, with a yard line every 5 yards, hash marks, numbers and goal posts on the goal lines. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARA10203040505040302010C01020304050504030201CAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "cfl", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

IFAF field, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an international (IFAF) football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARA102030405040302010010203040504030201AUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "ifaf", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NHL rink, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NBA court, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nba", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Soccer pitch, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Baseball field, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "mlb", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Curling sheet, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAURAURELIACALCALVARA21TotalFinal
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "curling", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Tennis court, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a tennis court, 78 by 36 feet, with its baselines, singles and doubles sidelines, service lines, centre service lines, centre marks and the net. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "tennis", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Volleyball court, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a volleyball court, 18 by 9 metres, with its centre line, attack lines, the net and its antennae. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "volleyball", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Badminton court, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a badminton court, 13.4 by 6.1 metres, with its singles and doubles lines, short and long service lines, centre lines and the net. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "badminton", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Pickleball court, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a pickleball court, 44 by 20 feet, with its non-volley zones, centre lines and the net. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "pickleball", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Table tennis table, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a table tennis table, 2.74 by 1.525 metres, with its side lines, end lines, centre line and the net. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "tabletennis", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Lacrosse field, carpets

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a lacrosse field, 100 by 60 metres, with its goals, creases and lines. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "lacrosse", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Rugby field, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a rugby union field, 120 by 70 metres with its in-goal areas, with the 22-metre lines, the half-way line, the dash lines and the goal posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "rugby", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Australian football ground, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: an Australian football ground, 160 by 141 metres, an oval with the goal squares, the centre square and circles, the fifty metre arcs, and the goal posts and behind posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIANorthern Cup finalCAL1AUR2–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "afl", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Gaelic games field, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a field for Gaelic football, 145 by 90 metres, with its lines across, the two rectangles at each end, the 13 and 40 metre arcs, the penalty point and the goalposts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "gaelic", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Cricket ground, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a cricket ground, 150 by 150 yards, with its boundary, the pitch with its creases and wickets, and the fielding restriction's circle where the rules have one. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "cricket", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Field hockey pitch, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a field hockey pitch, 91.4 by 55 metres, with the centre line, the 23-metre lines, the circles, the penalty spots and the goals. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "fieldhockey", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Handball court, carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a handball court, 40 by 20 metres, with the centre line, the goal areas, the 6-, 7- and 9-metre lines, the 4-metre lines and the goals. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "handball", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A stage on every surface#

pageant: "stage" puts each crest on a large round disc with a gold ring. A flag is cut to the circle; markFit: "contain" on a team shows a crest whole.

NFL field, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARA102030405040302010010203040504030201Northern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nfl", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

CFL field, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a Canadian football field, 150 by 65 yards with its 20-yard end zones, with a yard line every 5 yards, hash marks, numbers and goal posts on the goal lines. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARA10203040505040302010C01020304050504030201CNorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "cfl", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

IFAF field, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an international (IFAF) football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARA102030405040302010010203040504030201Northern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "ifaf", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NHL rink, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NBA court, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nba", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Soccer pitch, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Baseball field, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "mlb", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Curling sheet, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAURAURELIACALCALVARA21TotalFinal
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "curling", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Tennis court, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a tennis court, 78 by 36 feet, with its baselines, singles and doubles sidelines, service lines, centre service lines, centre marks and the net. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "tennis", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Volleyball court, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a volleyball court, 18 by 9 metres, with its centre line, attack lines, the net and its antennae. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "volleyball", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Badminton court, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a badminton court, 13.4 by 6.1 metres, with its singles and doubles lines, short and long service lines, centre lines and the net. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "badminton", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Pickleball court, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a pickleball court, 44 by 20 feet, with its non-volley zones, centre lines and the net. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "pickleball", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Table tennis table, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a table tennis table, 2.74 by 1.525 metres, with its side lines, end lines, centre line and the net. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "tabletennis", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Lacrosse field, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a lacrosse field, 100 by 60 metres, with its goals, creases and lines. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "lacrosse", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Rugby field, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a rugby union field, 120 by 70 metres with its in-goal areas, with the 22-metre lines, the half-way line, the dash lines and the goal posts. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "rugby", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Australian football ground, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: an Australian football ground, 160 by 141 metres, an oval with the goal squares, the centre square and circles, the fifty metre arcs, and the goal posts and behind posts. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "afl", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Gaelic games field, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a field for Gaelic football, 145 by 90 metres, with its lines across, the two rectangles at each end, the 13 and 40 metre arcs, the penalty point and the goalposts. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "gaelic", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Cricket ground, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a cricket ground, 150 by 150 yards, with its boundary, the pitch with its creases and wickets, and the fielding restriction's circle where the rules have one. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "cricket", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Field hockey pitch, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a field hockey pitch, 91.4 by 55 metres, with the centre line, the 23-metre lines, the circles, the penalty spots and the goals. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "fieldhockey", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Handball court, stages

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. Drawn as: a handball court, 40 by 20 metres, with the centre line, the goal areas, the 6-, 7- and 9-metre lines, the 4-metre lines and the goals. Each team's crest stands on a large round stage over its own part of the surface.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "handball", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

An emblem in the centre#

emblem is a competition's picture or a trophy, in the centre circle, centre ice or centre court. The score then goes to the strip under the drawing.

Soccer pitch: carpets and the cup

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. The Northern Cup emblem is in the middle.CALVARAAURELIANorthern CupCAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { emblem: cup, emblemName: "Northern Cup" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Soccer pitch: stages and the cup

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's crest stands on a large round stage over its own part of the surface. The Northern Cup emblem is in the middle.CALVARAAURELIANorthern CupCAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { style: "stage", emblem: cup, emblemName: "Northern Cup" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NHL rink: stages and the cup at centre ice

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's crest stands on a large round stage over its own part of the surface. An emblem is in the middle.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: { style: "stage", emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NBA court: carpets and the cup at centre court

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nba", pageant: { emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NFL field: carpets and the cup at midfield

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.AURELIACALVARA102030405040302010010203040504030201AUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nfl", pageant: { emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A trophy as it is, with no disc

Calvara 1, Aurelia 2, FinalFinal. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.CALVARAAURELIACAL1AUR2Final

`emblemShape: "plain"` draws a picture with a cut-out outline as it is, over a soft shadow.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const trophy = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30 14H70V40Q70 62 50 66Q30 62 30 40Z" fill="#d8ae4a"/><path d="M30 20H16Q16 44 34 50M70 20H84Q84 44 66 50" fill="none" stroke="#d8ae4a" stroke-width="5"/><path d="M44 66H56V80H68V88H32V80H44Z" fill="#a67a1d"/></svg>';
const svg = drawKyogijo({ sport: "soccer", away: aurelia, home: calvara, status: "final", pageant: { emblem: trophy, emblemShape: "plain" } });

Baseball field: the cup on the mound

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "mlb", pageant: { emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Tall, and small#

A tall drawing lays the halves one above the other, and each flag is turned back upright. Under 320 pixels wide, or with detail: "simple", the fabric, the hairlines and the name pills are left out.

Soccer pitch, tall, with the cup

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", orientation: "portrait", pageant: { emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NFL field, tall

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an American football field, 120 by 53 and a third yards with its end zones, with a yard line every 5 yards, hash marks, numbers and goal posts. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARA102030405040302010102030405040302010Northern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nfl", orientation: "portrait", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

NBA court, tall, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nba", orientation: "portrait", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A small drawing

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", width: 280, pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Borders, lines, fabric and names#

Each choice on its own: the border band (dark, team or a colour) and its width, the lines of the surface over, under or through the pictures, the fabric, a name on each flag, the score in the middle, a smaller picture, and a team with no flag.

Carpets at the flags' own ratio

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final

`fit: "ratio"` keeps each flag's own ratio and leaves the rest of the half bare.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { fit: "ratio", score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A border in each team's colour

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { border: "team", borderWidth: 0.1 }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A gold border

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { border: "#c9a24a" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Lines over the carpets (the default)

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Lines under the carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final

The carpets cover the lines under them.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { lines: "under", score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Lines through the carpets

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final

The carpets are a little see-through, so the lines show faintly.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { lines: "through", score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

No fabric

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: { fabric: false }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A name on each flag

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIAAURELIACALVARACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: { names: true }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

The score in the middle

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARANorthern Cup finalAUR2CAL1–Final

The plate is a little smaller and the carpets keep clear of it.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: { score: "centre" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Smaller pictures

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { scale: 0.7, score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A stage ringed in the team's colour

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", pageant: { style: "stage", ring: "team" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

No flags: the team's colours with its name

Northern Owls 3, Lakeshore Anchors 2, Final/OTFinal/OT. Northern Owls 3, Lakeshore Anchors 2. Northern Owls won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.NORTHERN OWLSLAKESHORE ANCHORSNORTHERNOWLSLAKESHOREANCHORSNOW3LSA2–Final/OT
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nhl",
  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
  status: "final-ot",
  pageant: "carpet",
});

No flags, on stages

Northern Owls 3, Lakeshore Anchors 2, Final/OTFinal/OT. Northern Owls 3, Lakeshore Anchors 2. Northern Owls won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's crest stands on a large round stage over its own part of the surface.NORTHERN OWLSNOWLAKESHORE ANCHORSLSANOW3LSA2–Final/OT

A team with no picture is its initials on its colour.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({
  sport: "nhl",
  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
  status: "final-ot",
  pageant: "stage",
});

A flag of 2 to 1

Calvara 1, Aurelia 2, FinalFinal. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final

A carpet is at its flag's own ratio, read from an SVG's viewBox or given as `logoRatio`.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const long = { ...aurelia, logoRatio: 2, logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><rect width="40" height="20" fill="#0f7a7a"/><rect y="7" width="40" height="6" fill="#f4f0e4"/></svg>' };
const svg = drawKyogijo({ sport: "soccer", away: long, home: calvara, status: "final", pageant: { score: "strip" } });

Dark, a crop and an entrance#

In the dark theme the border, the hairline and the shadow change. A drawing cropped to a range shows the carpet in the part that is shown. animate is CSS only and for readers who have not asked for less motion; a picture here is the finished drawing.

Dark theme

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", theme: "dark", pageant: { emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Dark theme, stages

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Each team's crest stands on a large round stage over its own part of the surface.AURELIACALVARANorthern Cup finalAUR2CAL1–Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nhl", theme: "dark", pageant: "stage", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

Cropped to the left half

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Shows only the half at the left end. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", range: { name: "half", end: "left" }, pageant: { score: "strip" }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

A compact card

Aurelia 2, Calvara 1, FinalNorthern Cup final, Final. Aurelia 2, Calvara 1. Aurelia won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Each team's flag or logo is laid out large over its own part of the surface, as a carpet.AURELIACALVARAAUR2CAL1Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "nba", size: "compact", pageant: "carpet", away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

With round marks in the strip

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's crest stands on a large round stage over its own part of the surface. An emblem is in the middle.CALVARAAURELIACAL1AUR2Final
Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", markShape: "round", pageant: { style: "stage", emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });

With an entrance

Calvara 1, Aurelia 2, FinalNorthern Cup final, Final. Calvara 1, Aurelia 2. Aurelia won. 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. Each team's flag or logo is laid out large over its own part of the surface, as a carpet. An emblem is in the middle.CALVARAAURELIACAL1AUR2Final

The carpets roll out from their ends and the cup grows; the picture shows them finished.

Download SVGOpen in a page

Open in a page loads the published package from jsDelivr, which serves only released versions.

Show the code
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const flag = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><path d="M15 2L27 10L15 18L3 10Z" fill="' + b + '"/><circle cx="15" cy="10" r="3.4" fill="' + c + '"/></svg>';
const stripes = (a, b, c) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="10.1" height="20" fill="' + a + '"/><rect x="10" width="10.1" height="20" fill="' + b + '"/><rect x="20" width="10" height="20" fill="' + c + '"/></svg>';
const cup = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#14233f"/><path d="M33 26H67V42Q67 58 50 62Q33 58 33 42Z" fill="#f2c230"/><path d="M33 30H24Q24 46 36 50M67 30H76Q76 46 64 50" fill="none" stroke="#f2c230" stroke-width="4"/><path d="M46 62H54V72H62V78H38V72H46Z" fill="#f2c230"/></svg>';
const aurelia = { name: "Aurelia", abbr: "AUR", score: 2, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 1, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", pageant: { animate: "unfurl", emblem: cup }, away: aurelia, home: calvara, status: "final", competition: "Northern Cup final" });