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: the situation of a game

Hockey's skaters and shootout, baseball's runners, outs and count, and football's down, distance and drives, drawn on the surface, in the badge and in the compact card. The teams are made up. 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.

Hockey: the strength, the empty net and the shootout#

A pill says the strength (5v4 PP), the empty net (EN), a delayed penalty and the clock; the attacking zone is tinted in the attacking team's colour. A shootout is a strip of dots across centre ice: a goal filled, a miss hollow, and the rounds after the third apart, as sudden death.

A power play, 5 against 4

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.NORTHERNOWLSLAKESHOREANCHORS5v4 PP 1:42NOW3LSA2–Live
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: "live",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

The goalkeeper pulled, the net ringed

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 6 skaters against 5. Northern Owls have pulled the goalkeeper, and the net is empty.NORTHERNOWLSLAKESHOREANCHORS6v5 PP ENNOW3LSA2–Live
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: "live",
  situation: { awaySkaters: 6, homeSkaters: 5, emptyNet: "away" },
});

A delayed penalty

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. A penalty to Lakeshore Anchors is delayed.NORTHERNOWLSLAKESHOREANCHORSDEL PENNOW3LSA2–Live
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: "live",
  situation: { delayedPenalty: "home" },
});

Four against four

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. 4 skaters against 4.NORTHERNOWLSLAKESHOREANCHORS4v4NOW3LSA2–Live
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: "live",
  situation: { awaySkaters: 4, homeSkaters: 4 },
});

A shootout into sudden death

Northern Owls 3, Lakeshore Anchors 2, Final/SOFinal/SO. 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. Shootout after 5 rounds: Northern Owls 3, Lakeshore Anchors 2. The rounds after the third are sudden death.NORTHERNOWLSLAKESHOREANCHORSNOW3LSA2SDNOW3LSA2–Final/SO
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-so",
  situation: {
    shootout: { rounds: [[true, false], [true, true], [false, true], [false, false], [true, false]] },
  },
});

A power play, tall

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.NORTHERNOWLSLAKESHOREANCHORS5v4 PP 1:42NOW3LSA2–Live
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: "live",
  orientation: "portrait",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

A power play on the rink of 2000-01

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. The markings are those of the 2000–01 season. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.NORTHERNOWLSLAKESHOREANCHORS5v4 PP 1:42NOW3LSA2–Live

The blue lines are 73 feet from the end boards, the goal lines 13, and there is no trapezoid.

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: "live",
  year: 2000,
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

Cropped to the offensive zone

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. Shows only the offensive zone at the right end. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.LAKESHOREANCHORS5v4 PP 1:42NOW3LSA2–Live
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: "live",
  range: "offensive-zone",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

The Olympic rink, 60 by 26 m

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. Drawn as: an ice hockey rink, 60 by 26 metres with rounded corners, with its red and blue lines, face-off circles, creases and goal nets. Power play: Northern Owls have 6 skaters against 5. Northern Owls have pulled the goalkeeper, and the net is empty.NORTHERNOWLSLAKESHOREANCHORS6v5 PP ENNOW3LSA2–Live
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: "live",
  league: "olympic",
  situation: { awaySkaters: 6, homeSkaters: 5, emptyNet: "away" },
});

The badge

Northern Owls 3, Lakeshore Anchors 2, P3 1:12P3 1:12. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.NOW3LSA25v4 PP 1:42P3 1:12
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: "P3 1:12",
  size: "badge",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

The compact card

Northern Owls 3, Lakeshore Anchors 2, P3 1:12P3 1:12. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.5v4 PP 1:42NOW3LSA25v4 PP 1:42P3 1:12
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: "P3 1:12",
  size: "compact",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

Baseball: the bases, the outs and the count#

The occupied bases are lit on the park's diamond, and a scorebug stands behind home plate: the diamond with its runners, the outs, the inning with an arrow for its half, and the count. In the badge and the compact card the scorebug takes the place of the picture of the field.

Bases loaded, two out, a full count

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NORTHERNOWLSLAKESHOREANCHORS73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

Runners on first and third

Northern Owls 4, Lakeshore Anchors 4, Bottom 3Bottom 3. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Bottom of the 3rd inning. 1 out. Runners on first and third. The count is 1 balls and 1 strikes.NORTHERNOWLSLAKESHOREANCHORS31-1NOW4LSA4–Bottom 3
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Bottom 3",
  situation: { bases: [true, false, true], outs: 1, inning: 3, half: "bottom", balls: 1, strikes: 1 },
});

Nobody on, nobody out

Northern Owls 4, Lakeshore Anchors 4, Top 1Top 1. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Top of the 1st inning. No outs. The bases are empty. The count is 0 balls and 0 strikes.NORTHERNOWLSLAKESHOREANCHORS10-0NOW4LSA4–Top 1
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 1",
  situation: { bases: [false, false, false], outs: 0, inning: 1, half: "top", balls: 0, strikes: 0 },
});

At Fenway Park

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. The outfield fence follows the figures published for Fenway Park. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NORTHERNOWLSLAKESHOREANCHORS73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  park: "fenway-park",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

Softball

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a softball field, with 60-foot bases, the pitcher 43 feet from home plate, the foul lines and the outfield fence. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NORTHERNOWLSLAKESHOREANCHORS73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  league: "fastpitch",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

At Koshien

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. The outfield fence follows the figures published for Koshien Stadium. Its official name is Hanshin Koshien Stadium. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NORTHERNOWLSLAKESHOREANCHORS73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  park: "hanshin-koshien-stadium",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

Cropped to the infield

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Shows only the infield. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  range: "infield",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

The badge

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NOW4LSA473-2Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  size: "badge",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

The compact card

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.73-2NOW4LSA473-2Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  size: "compact",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

Football: the line of scrimmage, the first down and the drives#

The line of scrimmage is blue and the first-down line yellow, the red zone is tinted, and a tag says the down and distance and the yard line. drive draws a drive chart: an arrow for each drive, in a lane of its own, with how it ended. The CFL's field is 110 yards with end zones of 20, and a team has three downs.

Third and 7 in the red zone

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

With a drive chart

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone. Drive by Harbour City Gulls, from own 25 to own 48: punt. Drive by Harbour City Gulls, from own 30 to opponent's 0: touchdown. Drive by Harbour City Gulls, from own 20 to opponent's 38: field goal. Drive by Prairie Ridge Bison, from own 25 to own 40: interception.HARBOUR CITY GULLSPRAIRIE RIDGE BISON102030405040302010010203040504030201PUNTTDFGINT3rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: {
    ballOn: 88,
    toGo: 7,
    down: 3,
    possession: "away",
    drive: [
      { from: 25, to: 48, result: "punt" },
      { from: 30, to: 100, result: "touchdown" },
      { from: 20, to: 62, result: "field-goal" },
      { team: "home", from: 25, to: 40, result: "interception" },
    ],
  },
});

First and goal

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Prairie Ridge Bison have the ball. 1st and goal. The ball is on the defence's 4-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302011st & GoalOPP 4HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: { ballOn: 96, toGo: "goal", down: 1, possession: "home" },
});

The CFL: third down on a field of 110 yards

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Prairie Ridge Bison have the ball. 3rd and goal. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOURCITY GULLSPRAIRIERIDGE BISON10203040505040302010C01020304050504030201C3rd & GoalOPP 12HCG27PRB24–Live
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: "cfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: { ballOn: 98, toGo: 12, down: 3, possession: "home" },
});

The IFAF's field

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB24–Live
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: "ifaf",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

The NCAA's field

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. Drawn as: a football field, 120 by 53.33 yards with its end zones, with its yard lines, hash marks, numbers and goal posts. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  league: "ncaa",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

The field of 1980

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. The markings are those of the 1980 season. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  year: 1980,
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

Tall

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020101020304050403020103rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  orientation: "portrait",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

Cropped to the red zone

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Shows only the red zone at the right end. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone. Drive by Harbour City Gulls, from own 30 to opponent's 0: touchdown. Drive by Harbour City Gulls, from own 20 to opponent's 38: field goal.PRAIRIE RIDGE BISON102030405040302010010203040504030201TDFG3rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  range: "red-zone",
  situation: {
    ballOn: 88,
    toGo: 7,
    down: 3,
    possession: "away",
    drive: [{ from: 30, to: 100, result: "touchdown" }, { from: 20, to: 62, result: "field-goal" }],
  },
});

Under a night look

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HARBOUR CITY GULLSPRAIRIE RIDGE BISON1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  look: "night",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

The badge

Harbour City Gulls 27, Prairie Ridge Bison 24, Q3 4:21Q3 4:21. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.HCG27PRB243rd & 7OPP 12Q3 4:21
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "Q3 4:21",
  size: "badge",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

The compact card

Harbour City Gulls 27, Prairie Ridge Bison 24, Q3 4:21Q3 4:21. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone.1020304050403020100102030405040302013rd & 7OPP 12HCG27PRB243rd & 7OPP 12Q3 4:21
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "Q3 4:21",
  size: "compact",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

Dark, and in Japanese#

The pill, the scorebug and the tag take the score panel's colours, so they follow the theme; the words of the description follow language.

Hockey, dark

Northern Owls 3, Lakeshore Anchors 2, LiveLive. Northern Owls 3, Lakeshore Anchors 2. 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. Power play: Northern Owls have 5 skaters against 4. 1:42 left on the penalty.NORTHERNOWLSLAKESHOREANCHORS5v4 PP 1:42NOW3LSA2–Live
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: "live",
  theme: "dark",
  situation: { awaySkaters: 5, homeSkaters: 4, clock: "1:42" },
});

Baseball, dark

Northern Owls 4, Lakeshore Anchors 4, Top 7Top 7. Northern Owls 4, Lakeshore Anchors 4. The game is level. Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Top of the 7th inning. 2 outs. The bases are loaded. The count is 3 balls and 2 strikes.NORTHERNOWLSLAKESHOREANCHORS73-2NOW4LSA4–Top 7
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: "mlb",
  away: { name: "Northern Owls", abbr: "NOW", score: 4, color: "#3a2d6b" },
  home: { name: "Lakeshore Anchors", abbr: "LSA", score: 4, color: "#0f7a7a" },
  status: "Top 7",
  theme: "dark",
  situation: { bases: [true, true, true], outs: 2, inning: 7, half: "top", balls: 3, strikes: 2 },
});

Football, dark

Harbour City Gulls 27, Prairie Ridge Bison 24, LiveLive. Harbour City Gulls 27, Prairie Ridge Bison 24. 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. Harbour City Gulls have the ball. 3rd and 7. The ball is on the defence's 12-yard line. The ball is in the red zone. Drive by Harbour City Gulls, from own 25 to own 48: punt. Drive by Harbour City Gulls, from own 30 to opponent's 0: touchdown. Drive by Harbour City Gulls, from own 20 to opponent's 38: field goal. Drive by Prairie Ridge Bison, from own 25 to own 40: interception.HARBOUR CITY GULLSPRAIRIE RIDGE BISON102030405040302010010203040504030201PUNTTDFGINT3rd & 7OPP 12HCG27PRB24–Live
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  theme: "dark",
  situation: {
    ballOn: 88,
    toGo: 7,
    down: 3,
    possession: "away",
    drive: [
      { from: 25, to: 48, result: "punt" },
      { from: 30, to: 100, result: "touchdown" },
      { from: 20, to: 62, result: "field-goal" },
      { team: "home", from: 25, to: 40, result: "interception" },
    ],
  },
});

The badge in Japanese

Harbour City Gulls 27、Prairie Ridge Bison 24、Q3 4:21Q3 4:21。Harbour City Gulls 27、Prairie Ridge Bison 24。図の内容：アメリカンフットボールのフィールド。エンドゾーンを含めて120×53⅓ヤードで、5ヤードごとのヤードライン、ハッシュマーク、ヤードナンバー、ゴールポストがあります。Harbour City Gullsがボールを持っています。第3ダウン、残り7ヤードです。ボールは攻撃側の敵陣12ヤードラインにあります。ボールはレッドゾーンにあります。HCG27PRB24第3ダウン 7ヤード敵陣12Q3 4:21
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "Q3 4:21",
  size: "badge",
  language: "ja",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});

The field in Japanese

Harbour City Gulls 27、Prairie Ridge Bison 24、試合中試合中。Harbour City Gulls 27、Prairie Ridge Bison 24。図の内容：アメリカンフットボールのフィールド。エンドゾーンを含めて120×53⅓ヤードで、5ヤードごとのヤードライン、ハッシュマーク、ヤードナンバー、ゴールポストがあります。Harbour City Gullsがボールを持っています。第3ダウン、残り7ヤードです。ボールは攻撃側の敵陣12ヤードラインにあります。ボールはレッドゾーンにあります。HARBOUR CITY GULLSPRAIRIE RIDGE BISON102030405040302010010203040504030201第3ダウン 7ヤード敵陣12HCG27PRB24–試合中
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: "nfl",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "live",
  language: "ja",
  situation: { ballOn: 88, toGo: 7, down: 3, possession: "away" },
});