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.

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

Gallery: surfaces and scores

The thirty-nine surfaces bare, with a game on each, wide and tall, as a strip and as a compact card, and the court's looks. Every picture is drawn by the build from the code under it. 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.

Each surface, bare#

drawKyogijo with a sport and nothing else.

NFL field

Download SVG Open 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: "nfl" });

CFL field

Download SVG Open 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: "cfl" });

IFAF field

Download SVG Open 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: "ifaf" });

NHL rink

Download SVG Open 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" });

NBA court

Download SVG Open 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: "nba" });

Soccer pitch

Download SVG Open 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: "soccer" });

Baseball field

Download SVG Open 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: "mlb" });

Curling sheet

Download SVG Open 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: "curling" });

Tennis court

Download SVG Open 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: "tennis" });

Volleyball court

Download SVG Open 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: "volleyball" });

Badminton court

Download SVG Open 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: "badminton" });

Pickleball court

Download SVG Open 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: "pickleball" });

Table tennis table

Download SVG Open 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: "tabletennis" });

Padel court

Download SVG Open 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: "padel" });

Squash court

Download SVG Open 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: "squash" });

Racquetball court

Download SVG Open 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: "racquetball" });

Sepak takraw court

Download SVG Open 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: "sepaktakraw" });

Teqball court

Download SVG Open 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: "teqball" });

Roundnet court

Download SVG Open 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: "roundnet" });

Netball court

Download SVG Open 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: "netball" });

Athletics stadium

Download SVG Open 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: "athletics" });

Skating rink

Download SVG Open 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: "skating" });

Lacrosse field

Download SVG Open 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: "lacrosse" });

Rugby field

Download SVG Open 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: "rugby" });

Australian football ground

Download SVG Open 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: "afl" });

Gaelic games field

Download SVG Open 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: "gaelic" });

Cricket ground

Download SVG Open 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: "cricket" });

Field hockey pitch

Download SVG Open 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: "fieldhockey" });

Handball court

Download SVG Open 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: "handball" });

Swimming pool

Download SVG Open 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: "swimming" });

Water polo field

Download SVG Open 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: "waterpolo" });

Diving well

Download SVG Open 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: "diving" });

Artistic swimming area

Download SVG Open 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: "artisticswimming" });

Judo competition area

Download SVG Open 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: "judo" });

Karate competition area

Download SVG Open 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: "karate" });

Kendo shiai-jo

Download SVG Open 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: "kendo" });

Sumo dohyō

Download SVG Open 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: "sumo" });

Kyūdōjō

Download SVG Open 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: "kyudo" });

Dojo

Download SVG Open 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: "dojo" });

A game on each surface#

The teams on their sides and the score in the middle.

NFL field, with a score

Download SVG Open 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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Championship Game",
});

CFL field, with a score

Download SVG Open 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: "cfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Grey Cup",
});

IFAF field, with a score

Download SVG Open 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: "ifaf",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "World Championship",
});

NHL rink, with a score

Download SVG Open 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",
  competition: "Cup Final, Game 7",
});

NBA court, with a score

Download SVG Open 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: "nba",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
});

Soccer pitch, with a score

Download SVG Open 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: "soccer",
  away: { name: "Northern Owls", abbr: "NOW", score: 2, penalties: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, penalties: 2, color: "#0f7a7a" },
  status: "final-pens",
  competition: "Cup Final",
});

Baseball field, with a score

Download SVG Open 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: "mlb",
  away: { name: "Valley Stars", abbr: "VAL", score: 4, color: "#c8102e" },
  home: { name: "Coastal Pines", abbr: "CPN", score: 6, color: "#1f6b3c" },
  status: "Bottom 9th",
  competition: "Game 5",
  park: "fenway-park",
});

Curling sheet, with a score

Download SVG Open 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: "curling",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
});

Tennis court, with a score

Download SVG Open 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: "tennis",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [6, 6, 2],
    tiebreaks: [5, null, null],
    points: "40",
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [7, 3, 3],
    points: "30",
  },
  status: "set-3",
  competition: "Final",
});

Volleyball court, with a score

Download SVG Open 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: "volleyball",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [25, 22, 25, 18],
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [21, 25, 20, 20],
  },
  status: "set-4",
  competition: "Semifinal",
});

Badminton court, with a score

Download SVG Open 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: "badminton",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [21, 18, 11],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [17, 21, 9] },
  status: "game-3",
  competition: "Final",
});

Pickleball court, with a score

Download SVG Open 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: "pickleball",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [11, 8, 5],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [7, 11, 4] },
  status: "game-3",
  competition: "Final",
});

Table tennis table, with a score

Download SVG Open 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: "tabletennis",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 3,
    color: "#1d4f91",
    sets: [11, 9, 11, 7, 11],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 2,
    color: "#a8452c",
    sets: [7, 11, 8, 11, 6],
  },
  status: "final",
  competition: "Final",
});

Padel court, with a score

Download SVG Open 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: "padel",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [6, 6, 2],
    tiebreaks: [5, null, null],
    points: "40",
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [7, 3, 3],
    points: "30",
  },
  status: "set-3",
  competition: "Final",
});

Squash court, with a score

Download SVG Open 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: "squash",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 3,
    color: "#1d4f91",
    sets: [11, 9, 11, 7, 11],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 2,
    color: "#a8452c",
    sets: [7, 11, 8, 11, 6],
  },
  status: "final",
  competition: "Final",
});

Racquetball court, with a score

Download SVG Open 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: "racquetball",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 3, color: "#1d4f91", sets: [11, 8, 11, 11] },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [7, 11, 9, 5] },
  status: "final",
  competition: "Final",
});

Sepak takraw court, with a score

Download SVG Open 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: "sepaktakraw",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [21, 17, 15],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [18, 21, 12] },
  status: "final",
  competition: "Final",
});

Teqball court, with a score

Download SVG Open 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: "teqball",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [12, 9, 12],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [10, 12, 7] },
  status: "final",
  competition: "Final",
});

Roundnet court, with a score

Download SVG Open 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: "roundnet",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [21, 18, 21],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [15, 21, 17] },
  status: "final",
  competition: "Final",
});

Netball court, with a score

Download SVG Open 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: "netball",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 52, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 49, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Athletics stadium, with a score

Download SVG Open 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: "athletics",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Relay final",
});

Skating rink, with a score

Download SVG Open 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: "skating",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Team pursuit final",
});

Lacrosse field, with a score

Download SVG Open 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: "lacrosse",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Rugby field, with a score

Download SVG Open 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: "rugby",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Australian football ground, with a score

Download SVG Open 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: "afl",
  away: { name: "Harbour City Gulls", abbr: "HCG", goals: 10, behinds: 12, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", goals: 9, behinds: 14, color: "#a8452c" },
  status: "final",
  competition: "Grand Final",
});

Gaelic games field, with a score

Download SVG Open 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: "gaelic",
  away: { name: "Harbour City Gulls", abbr: "HCG", goals: 2, points: 14, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", goals: 1, points: 15, color: "#a8452c" },
  status: "final",
  competition: "All-Ireland Final",
});

Cricket ground, with a score

Download SVG Open 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: "cricket",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 245,
    wickets: 6,
    overs: "50",
    color: "#1d4f91",
    innings: [245],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 187,
    wickets: 10,
    overs: "41.2",
    color: "#a8452c",
    innings: [187],
  },
  status: "final",
  competition: "Final",
});

Field hockey pitch, with a score

Download SVG Open 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: "fieldhockey",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Handball court, with a score

Download SVG Open 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: "handball",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Swimming pool, with a score

Download SVG Open 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: "swimming",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 146, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 154, color: "#a8452c" },
  status: "final",
  competition: "Dual meet",
});

Water polo field, with a score

Download SVG Open 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: "waterpolo",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 9, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 11, color: "#a8452c" },
  status: "final",
  competition: "Quarter-final",
});

Diving well, with a score

Download SVG Open 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: "diving",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 146, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 154, color: "#a8452c" },
  status: "final",
  competition: "Dual meet",
});

Artistic swimming area, with a score

Download SVG Open 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: "artisticswimming",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 146, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 154, color: "#a8452c" },
  status: "final",
  competition: "Team event",
});

Judo competition area, with a score

Download SVG Open 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: "judo",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    color: "#1d4f91",
    budo: { wazaari: 1, yuko: 2, shido: 1 },
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", color: "#a8452c", budo: { wazaari: 1, shido: 2 } },
  status: "final",
  competition: "Final, 73 kg",
});

Karate competition area, with a score

Download SVG Open 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: "karate",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    color: "#1d4f91",
    budo: { ippon: 1, wazaari: 1, senshu: true, shido: 1 },
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", color: "#a8452c", budo: { wazaari: 2, yuko: 1 } },
  status: "final",
  competition: "Kumite final",
});

Kendo shiai-jo, with a score

Download SVG Open 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: "kendo",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    color: "#1d4f91",
    budo: { techniques: ["men", "kote"] },
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", color: "#a8452c", budo: { techniques: ["do"] } },
  status: "final",
  competition: "Final",
});

Sumo dohyō, with a score

Download SVG Open 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: "sumo",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    budo: { kimarite: "yorikiri" },
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 0, color: "#a8452c" },
  status: "final",
  competition: "Day 15",
});

Kyūdōjō, with a score

Download SVG Open 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: "kyudo",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 14, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 12, color: "#a8452c" },
  status: "final",
  competition: "Team final",
});

Dojo, with a score

Download SVG Open 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: "dojo",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Open day",
});

Wide and tall#

orientation: "portrait" turns the surface a quarter and keeps every word upright.

NHL rink, tall

Download SVG Open 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",
  competition: "Cup Final, Game 7",
  orientation: "portrait",
});

NFL field, tall

Download SVG Open 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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Championship Game",
  orientation: "portrait",
});

NBA court, tall

Download SVG Open 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: "nba",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
  orientation: "portrait",
});

Soccer pitch, tall

Download SVG Open 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: "soccer",
  away: { name: "Northern Owls", abbr: "NOW", score: 2, penalties: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, penalties: 2, color: "#0f7a7a" },
  status: "final-pens",
  competition: "Cup Final",
  orientation: "portrait",
});

Baseball field, tall

A ballpark is already upright, so the teams go in strips above and below it.

Download SVG Open 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: "mlb",
  away: { name: "Valley Stars", abbr: "VAL", score: 4, color: "#c8102e" },
  home: { name: "Coastal Pines", abbr: "CPN", score: 6, color: "#1f6b3c" },
  status: "Bottom 9th",
  competition: "Game 5",
  park: "fenway-park",
  orientation: "portrait",
});

Curling sheet, wide

A curling sheet lies tall unless it is asked to lie wide.

Download SVG Open 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: "curling",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
  orientation: "landscape",
});

A strip for a list, and a compact card#

size: "badge" is the strip alone; size: "compact" is the surface with that strip under it.

Badge, hockey

Download SVG Open 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",
  competition: "Cup Final, Game 7",
  size: "badge",
});

Badge, basketball

Download SVG Open 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: "nba",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
  size: "badge",
});

Badge, football

Download SVG Open 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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Championship Game",
  size: "badge",
});

Badge, baseball

Download SVG Open 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: "mlb",
  away: { name: "Valley Stars", abbr: "VAL", score: 4, color: "#c8102e" },
  home: { name: "Coastal Pines", abbr: "CPN", score: 6, color: "#1f6b3c" },
  status: "Bottom 9th",
  competition: "Game 5",
  park: "fenway-park",
  size: "badge",
});

Badge, curling

The hammer is the small stone in the corner of the team that has it.

Download SVG Open 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: "curling",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 5,
    color: "#1d4f91",
    ends: [0, 1, 0, 2, 0, 0, 1, 0, 1, "X"],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 4,
    color: "#a8452c",
    hammer: true,
    ends: [1, 0, 2, 0, 1, 0, 0, 1, 0],
  },
  status: "end-10",
  competition: "Final",
  size: "badge",
});

Compact card, basketball

Download SVG Open 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: "nba",
  away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" },
  home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" },
  status: "final",
  competition: "Finals, Game 6",
  size: "compact",
});

Compact card, hockey

Download SVG Open 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",
  competition: "Cup Final, Game 7",
  size: "compact",
});

Round marks#

mark: "round" on a team, or markShape: "round" for both, clips a flag or a logo to a circle with a ring: on each side of the surface, in the badge and in the strip of a compact card. A team with no logo is its initials on its colour. The flags are made-up shapes drawn in the code.

Round marks on a pitch, wide

Download SVG Open 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 aurelia = { name: "Aurelia", abbr: "AUR", score: 2, penalties: 4, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 2, penalties: 3, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", markShape: "round", away: aurelia, home: calvara, status: "final-pens", competition: "Northern Cup final", orientation: "landscape" });

Round marks on a pitch, tall

The flags stay upright where the names are turned.

Download SVG Open 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 aurelia = { name: "Aurelia", abbr: "AUR", score: 2, penalties: 4, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 2, penalties: 3, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", markShape: "round", away: aurelia, home: calvara, status: "final-pens", competition: "Northern Cup final", orientation: "portrait" });

Round marks in a badge

Download SVG Open 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 aurelia = { name: "Aurelia", abbr: "AUR", score: 2, penalties: 4, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 2, penalties: 3, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", markShape: "round", away: aurelia, home: calvara, status: "final-pens", size: "badge" });

Round marks in a compact card

Download SVG Open 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 aurelia = { name: "Aurelia", abbr: "AUR", score: 2, penalties: 4, color: "#0f7a7a", logo: flag("#0f7a7a", "#f4f0e4", "#e07a1f") };
const calvara = { name: "Calvara", abbr: "CAL", score: 2, penalties: 3, color: "#6b2d5c", logo: stripes("#6b2d5c", "#f2c230", "#14233f") };
const svg = drawKyogijo({ sport: "soccer", markShape: "round", away: aurelia, home: calvara, status: "final-pens", size: "compact" });

No flag: the initials on the team's colour

Download SVG Open 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",
  markShape: "round",
  away: { name: "Northern Owls", abbr: "NOW", score: 3, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 2, color: "#0f7a7a" },
  status: "final-ot",
});

The court's looks#

Five looks to start from, in COURT_THEMES; each colour of a look is an option too.

Court: maple

Download SVG Open in a page

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

Show the code

import { COURT_THEMES, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", court: COURT_THEMES.maple, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

Court: twoTone

Download SVG Open in a page

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

Show the code

import { COURT_THEMES, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", court: COURT_THEMES.twoTone, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

Court: night

Download SVG Open in a page

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

Show the code

import { COURT_THEMES, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", court: COURT_THEMES.night, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

Court: tournament

Download SVG Open in a page

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

Show the code

import { COURT_THEMES, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", court: COURT_THEMES.tournament, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

Court: sunburst

Download SVG Open in a page

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

Show the code

import { COURT_THEMES, drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";

const svg = drawKyogijo({ sport: "nba", court: COURT_THEMES.sunburst, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

A realistic basketball floor#

court: { hardwood: true } lays maple boards that run the length of the court, with staggered ends, grain and tone, stained paint and border, the baskets and their shadows from above, and a satin sheen. The clean floor stays the default.

Hardwood, bare

The court's lines are the NBA's; the boards, the stain and the shadows are drawn from a seed, so the same call is always the same floor.

Download SVG Open 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: "nba", court: { hardwood: true } });

Hardwood in a club's colours

The strip behind each baseline takes the colour of the team that defends it (`leftColor` and `rightColor`, or `baselineColor`); the paint is stain, so the boards show through it.

Download SVG Open 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 logo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" fill="#10294f"/><circle cx="50" cy="50" r="38" fill="none" stroke="#f2f2f2" stroke-width="4"/><path d="M20 62Q35 30 50 50T80 38" fill="none" stroke="#f2c230" stroke-width="7" stroke-linecap="round"/></svg>';
const svg = drawKyogijo({
  sport: "nba",
  leftColor: "#1d4f91",
  rightColor: "#8a2432",
  court: {
    hardwood: true,
    apron: "#14171c",
    border: "#13233f",
    keyLeft: "#1d4f91",
    keyRight: "#8a2432",
    centreCircle: "#1d4f91",
    centreLogo: logo,
    baselineText: ["HARBOUR CITY", "PRAIRIE RIDGE"],
    sidelineText: "KYOGIJO LEAGUE",
  },
});

Hardwood, dark

Download SVG Open 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: "nba", theme: "dark", court: { hardwood: true, sidelineText: "KYOGIJO LEAGUE" } });

Hardwood, tall

The boards still run the length of the court; the baseline words read left to right and the sideline words run along their strips.

Download SVG Open 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: "nba", orientation: "portrait", court: { hardwood: true, baselineText: ["LAKEVIEW", "HARBOUR CITY"], sidelineText: "KYOGIJO LEAGUE" } });

Hardwood, FIBA

Every league of the sport takes it: the NBA, WNBA, FIBA, NCAA, NFHS and G League courts; another `seed` is another floor.

Download SVG Open 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: "nba", league: "fiba", court: { hardwood: { seed: 7 } } });

Hardwood, WNBA

Boards 3 inches wide and a lighter stain.

Download SVG Open 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: "nba", league: "wnba", court: { hardwood: { board: 3, stain: 0.6 }, key: "#4b2e83", keyLeft: "#4b2e83", keyRight: "#4b2e83", border: "#2b1a4d" } });

Hardwood, plain for a thumbnail

Under 480 pixels wide (or with `detail: "simple"`) the floor keeps its broad boards, its stain and its sheen and leaves out the seams, the grain and the soft shadows, so that a small drawing stays clean.

Download SVG Open 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: "nba", width: 320, court: { hardwood: true } });

Hardwood under a shot chart

The data layers sit over the floor, shadows and sheen as they do over the clean one.

Download SVG Open 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 shots = Array.from({ length: 48 }, (_, i) => ({ x: 6 + ((i * 17) % 84), y: 4 + ((i * 29) % 42), outcome: i % 3 === 0 ? "goal" : "shot" }));
const svg = drawKyogijo({ sport: "nba", court: { hardwood: true }, layers: [{ kind: "points", data: shots }] });

Hardwood with a score

Download SVG Open 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: "nba", away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final", court: { hardwood: true } });

The stands and the crowd#

crowd: true draws the stands round a surface that has spectators and the people in them, in the home colours with the visitors at an end and the empty seats showing. The clean drawing stays the default.

Soccer in a bowl

A bowl of two tiers, the home fans in the home team's colour and the visitors in a block at one end, with a tunnel, benches and a camera platform on the bench side.

Download SVG Open 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: "soccer", leftColor: "#1d4f91", rightColor: "#b5452c", crowd: true });

Soccer in an NFL stadium

The stands keep the football field's footprint (drawn faintly over the pitch with its end zones and yard lines): the pitch is wider than the field, so its touchlines are 8.5 feet from the front rows.

Download SVG Open 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: "soccer", ground: "metlife-stadium", leftColor: "#1d4f91", rightColor: "#b5452c", crowd: true });

A ballpark

Grandstands along the foul lines and behind home plate, bleachers behind the park's own fence with a gap at the batter's eye.

Download SVG Open 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: "mlb", park: "fenway-park", leftColor: "#1d4f91", rightColor: "#b5452c", crowd: true });

An NHL arena

Download SVG Open 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", leftColor: "#1d4f91", rightColor: "#c2410c", crowd: true });

An NBA arena

Courtside rows, a lower bowl and an upper tier, 95 percent full.

Download SVG Open 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: "nba", leftColor: "#14233f", rightColor: "#c2410c", crowd: { density: 0.95 } });

A curling hall

Two sides of seating along the sheet.

Download SVG Open 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: "curling", orientation: "landscape", crowd: true });

A card display

Blocks of the lower stands behind each goal in checks of each team's colour.

Download SVG Open 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: "soccer", leftColor: "#0f7a7a", rightColor: "#6b2d5c", crowd: { tifo: "both", tifoDesign: "checks", seed: 3 } });

A half-empty horseshoe

Three sides, open at one end; the empty seats show.

Download SVG Open 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: "rugby", crowd: { shape: "horseshoe", attendance: 18000, capacity: 45000 } });

A tall football field in the dark, with a score

Download SVG Open 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: "nfl", orientation: "portrait", theme: "dark", crowd: true, away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" });

A thumbnail, as blocks

Under 480 pixels wide (or with `detail: "simple"`) the stands are blocks of colour: no pattern, no aisles, a few kB.

Download SVG Open 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", width: 300, crowd: true });

Light, dark and detail#

theme picks the drawing's colours; exactLines draws the lines at their true widths; detail: "simple" leaves out the small markings.

Rink, light

Download SVG Open 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", theme: "light" });

Rink, dark

Download SVG Open 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", theme: "dark" });

Field, lines at their true widths

Download SVG Open 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: "nfl", exactLines: true });

Field, simple

Download SVG Open 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: "nfl", detail: "simple" });