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.

Coordinate frames

A data provider puts a point on a rink or a field in its own numbers: the NHL's feet from centre ice, HockeyTech's canvas of 600 by 300, the NBA's tenths of a foot from the hoop. A Frame says how those numbers lie on the surface (unit, range, origin, which way y grows, landmarks), and toSurface and fromSurface move points between a frame and the drawing's own coordinates. convert(from, to) goes from one provider's frame to another's. The module is @johnmorrisdotca/kyogijo-stadiums/frames; each frame is cited in sources.md. To ask where a point is by a sport's rules (which zone, which area) from a frame's numbers, see zones; to ask where a click on a drawing is, in any frame, see pointing.

Every frame#

One row for each frame the package starts with. The table is made from the code (FRAMES) by pnpm docs:make, and a test holds it to it, so it cannot fall behind: the range, the origin, the way y grows, whether the frame fits one size of surface or any, the unit and the source of each are the frame's own fields. A frame's note says what the source does not settle. Each source is cited in sources.md (the soccer providers in sources.md).

FrameSportUnitRange of x and yOriginy growsSizeEndsSource
nhl-apiNHLfeetx -100 to 100; y -42.5 to 42.5centre iceupfixed: one size of surfacefixed to the surfaceNHL API coordinates
hockeytechNHLpixelsx 0 to 600; y 0 to 300the top left corner of the canvasdownfixed: one size of surfacefixed to the surfaceHockeyTech coordinates
nba-statsNBAtenths of a footx -250 to 250; y -52.5 to 887.5the centre of the hoopupfixed: one size of surfacethe basket or house attackedNBA stats shot coordinates
nfl-trackingNFLyardsx 0 to 120; y 0 to 53.33the corner of the back of the left end zone, at the bottom of the field diagramupfixed: one size of surfacefixed to the surfaceNFL tracking data
mlbamMLBpixelsx 0 to 250; y 0 to 250the top left of the image; home plate stands at (125.42, 198.27)downfixed: one size of surfacenoneMLBAM and Statcast hit coordinates
retrosheetMLBfeetx -330 to 330; y -60 to 420the back point of home plateupfixed: one size of surfacenoneRetrosheet hit locations
curlingcurlingfeetx -7.8 to 7.8; y -132 to 18the button of the house the stones are played todownvariable: the surface's size is giventhe basket or house attackedthis package's own frame: the button as the origin, as the rulebooks measure a stone's score from the tee
tennistennisfeetx -39 to 39; y -18 to 18the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
volleyballvolleyballmetresx -9 to 9; y -4.5 to 4.5the centre of the net, on the courtupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
badmintonbadmintonmetresx -6.7 to 6.7; y -3.05 to 3.05the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
pickleballpickleballfeetx -22 to 22; y -10 to 10the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
tabletennistable tennismetresx -1.37 to 1.37; y -0.76 to 0.76the centre of the net, on the tableupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
padelpadelmetresx -10 to 10; y -5 to 5the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
squashsquashmetresx -4.87 to 4.88; y -4.21 to 4.21the centre of the court; the front wall is at the leftupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the court as the origin
racquetballracquetballfeetx -20 to 20; y -10 to 10the centre of the court; the front wall is at the leftupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the court as the origin
sepaktakrawsepak takrawmetresx -6.7 to 6.7; y -3.05 to 3.05the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
teqballteqballmetresx -8 to 8; y -6 to 6the centre of the net, on the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the net as the origin, as the rulebook measures the court from the net
roundnetroundnetmetresx -5 to 5; y -5 to 5the centre of the set, the middle of the courtupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the court as the origin
netballnetballmetresx -15.25 to 15.25; y -7.62 to 7.63the centre of the court, on the centre circleupfixed: one size of surfacefixed to the surfacethis package's own frame: the centre of the court as the origin
lacrosselacrossemetresx -50 to 50; y -30 to 30the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
rugbyrugbymetresx -60 to 60; y -35 to 35the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
aflAustralian footballmetresx -80 to 80; y -70.5 to 70.5the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
gaelicGaelic gamesmetresx -72.5 to 72.5; y -45 to 45the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
cricketcricketyardsx -75 to 75; y -75 to 75the middle of the pitch, the centre of the groundupvariable: the surface's size is givennonethis package's own frame: the centre of the surface as the origin
fieldhockeyfield hockeymetresx -45.7 to 45.7; y -27.5 to 27.5the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
handballhandballmetresx -20 to 20; y -10 to 10the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
swimmingswimmingmetresx -25 to 25; y -13 to 13the centre of the waterupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
waterpolowater polometresx -12.8 to 12.8; y -10 to 10the centre of the waterupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
divingdivingmetresx -10.5 to 10.5; y -13.5 to 13.5the centre of the waterupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
artisticswimmingartistic swimmingmetresx -15 to 15; y -10 to 10the centre of the waterupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
athleticsathleticsmetresx -100 to 100; y -60 to 60the middle of the trackdownvariable: the surface's size is givennonethis package's own frame: the middle of the track as the origin
skatingice skatingmetresx -100 to 100; y -60 to 60the middle of the rinkdownvariable: the surface's size is givennonethis package's own frame: the middle of the rink as the origin
judojudometresx -9 to 9; y -9 to 9the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
karatekaratemetresx -6 to 6; y -6 to 6the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
kendokendometresx -5 to 5; y -5 to 5the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
sumosumometresx -3.35 to 3.35; y -3.35 to 3.35the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
kyudokyudometresx -18.9 to 18.9; y -8.1 to 8.1the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
dojodojometresx -3.64 to 3.64; y -2.28 to 2.28the centre of the surfaceupvariable: the surface's size is givenfixed to the surfacethis package's own frame: the centre of the surface as the origin
optasoccerpercent of the pitchx 0 to 100; y 0 to 100the bottom left corner of the pitchupvariable: the surface's size is givenfixed to the surfaceStats Perform's event specification is not public: the figures are those mplsoccer and ggsoccer agree on (docs/sources.md)
statsbombsocceryardsx 0 to 120; y 0 to 80the top left corner of the pitchdownvariable: the surface's size is givenfixed to the surfaceStatsBomb Open Data Events v4.0.0, Appendix 2, Locations (github.com/statsbomb/open-data, doc/)
wyscoutsoccerpercent of the pitchx 0 to 100; y 0 to 100the top left corner of the pitchdownvariable: the surface's size is givenfixed to the surfaceWyscout Data Glossary, Pitch coordinates (dataglossary.wyscout.com/pitch_coordinates); the posts are from ggsoccer, which the glossary does not mark
tracabsoccercentimetresx -5250 to 5250; y -3400 to 3400the centre spotupvariable: the surface's size is givenfixed to the surfaceTracab's specification is not public: the origin, unit and y direction are those mplsoccer, kloppy and floodlight use (docs/sources.md); the lines are the Laws'
metricasoccerfractions of the pitchx 0 to 1; y 0 to 1the top left corner of the pitchdownvariable: the surface's size is givenfixed to the surfaceMetrica Sports sample-data README (github.com/metrica-sports/sample-data)
skillcornersoccermetresx -52.5 to 52.5; y -34 to 34the centre spotupvariable: the surface's size is givenfixed to the surfaceSkillCorner open data README and field diagram (github.com/SkillCorner/opendata)
secondspectrumsoccermetresx -52.5 to 52.5; y -34 to 34the centre spotupvariable: the surface's size is givenfixed to the surfaceSecond Spectrum's specification is not public: the origin, unit and y direction are those mplsoccer, kloppy and floodlight use (docs/sources.md)
impectsoccermetresx -52.5 to 52.5; y -34 to 34the centre spotupvariable: the surface's size is givenfixed to the surfaceImpect Glossary, context variables, "How is the pitch defined?" (glossary.impect.com/context-variable)
uefasoccermetresx 0 to 105; y 0 to 68the bottom left corner of the pitchupvariable: the surface's size is givenfixed to the surfaceUEFA Stadium Infrastructure Regulations, Article 5.01: 105 by 68 metres for categories 3 and 4; mplsoccer's 'uefa' type is the same in its code (its text says 65)
internationalsoccermetresx 0 to 105; y 0 to 68the bottom left corner of the pitchupvariable: the surface's size is givenfixed to the surfaceIFAB Laws of the Game, Law 1; ggsoccer's pitch_international

The same spot in each frame#

Each picture is the same surface with the same spot marked, written in the frame's own numbers: the star is the spot, and an arrow from it shows which way x grows and another which way y does, each with its letter. They are drawn by the build of the docs site from the code under each, with from naming the frame, so every one lands on the same place. The soccer providers that fix their lines (Opta, StatsBomb, Wyscout) are drawn with the lines where they put them. To try a point of your own, use the converter in the demo.

nhl-api

NHL hockey rinkDrawn 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. Data: 1 x grows. 1 y grows. 1 the right end-zone face-off dot. 2 axes.1 x grows1 y grows1 the right end-zone face-off dotthe right end-zone face-off dot: 69, 222 axesxy

NHL API play-by-play (xCoord, yCoord). The right end-zone face-off dot is (69, 22) in feet; the arrows show which way x (blue) and y (orange) grow.

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",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "nhl-api",
      data: [{ x: 69, y: 22, x2: 93, y2: 22 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "nhl-api",
      data: [{ x: 69, y: 22, x2: 69, y2: 32.2 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right end-zone face-off dot",
      from: "nhl-api",
      data: [{ x: 69, y: 22, title: "the right end-zone face-off dot: 69, 22" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "nhl-api",
      data: [{ x: 100.2, y: 22, text: "x" }, { x: 69, y: 36.28, text: "y" }],
      style: { size: 4 },
    },
  ],
});

hockeytech

NHL hockey rinkDrawn 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. Data: 1 x grows. 1 y grows. 1 the right end-zone face-off dot. 2 axes.1 x grows1 y grows1 the right end-zone face-off dotthe right end-zone face-off dot: 507, 72.352 axesxy

HockeyTech canvas (600 by 300). The right end-zone face-off dot is (507, 72.35) in pixels; the arrows show which way x (blue) and y (orange) grow.

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",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "hockeytech",
      data: [{ x: 507, y: 72.35, x2: 579, y2: 72.35 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "hockeytech",
      data: [{ x: 507, y: 72.35, x2: 507, y2: 108.35 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right end-zone face-off dot",
      from: "hockeytech",
      data: [{ x: 507, y: 72.35, title: "the right end-zone face-off dot: 507, 72.35" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "hockeytech",
      data: [{ x: 600.6, y: 72.35, text: "x" }, { x: 507, y: 122.75, text: "y" }],
      style: { size: 4 },
    },
  ],
});

nba-stats

NBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Data: 1 x grows. 1 y grows. 1 the middle of the free-throw line. 2 axes.1 x grows1 y grows1 the middle of the free-throw linethe middle of the free-throw line: 0, 1902 axesxy

NBA stats legacy shot coordinates (LOC_X, LOC_Y). The middle of the free-throw line is (0, 190) in tenths of a foot; the arrows show which way x (blue) and y (orange) grow.

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: "nba",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "nba-stats",
      data: [{ x: 0, y: 190, x2: 60, y2: 190 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "nba-stats",
      data: [{ x: 0, y: 190, x2: 0, y2: 302.8 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the free-throw line",
      from: "nba-stats",
      data: [{ x: 0, y: 190, title: "the middle of the free-throw line: 0, 190" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "nba-stats",
      data: [{ x: 78, y: 190, text: "x" }, { x: 0, y: 347.92, text: "y" }],
      style: { size: 4 },
    },
  ],
});

nfl-tracking

NFL football fieldDrawn 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. Data: 1 x grows. 1 y grows. 1 the middle of the right 20-yard line. 2 axes.1020304050403020100102030405040302011 x grows1 y grows1 the middle of the right 20-yard linethe middle of the right 20-yard line: 90, 26.672 axesxy

NFL tracking data (x, y in yards). The middle of the right 20-yard line is (90, 26.67) in yards; the arrows show which way x (blue) and y (orange) grow.

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",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, x2: 104.4, y2: 26.67 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, x2: 90, y2: 33.07 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right 20-yard line",
      from: "nfl-tracking",
      data: [{ x: 90, y: 26.67, title: "the middle of the right 20-yard line: 90, 26.67" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "nfl-tracking",
      data: [{ x: 108.72, y: 26.67, text: "x" }, { x: 90, y: 35.63, text: "y" }],
      style: { size: 4 },
    },
  ],
});

mlbam

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Data: 1 x grows. 1 y grows. 1 first base. 2 axes.1 x grows1 y grows1 first basefirst base: 150.88, 172.812 axesxy

MLBAM and Statcast hit coordinates (hc_x, hc_y). First base is (150.88, 172.81) in pixels; the arrows show which way x (blue) and y (orange) grow.

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",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "mlbam",
      data: [{ x: 150.88, y: 172.81, x2: 180.88, y2: 172.81 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "mlbam",
      data: [{ x: 150.88, y: 172.81, x2: 150.88, y2: 202.81 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "first base",
      from: "mlbam",
      data: [{ x: 150.88, y: 172.81, title: "first base: 150.88, 172.81" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "mlbam",
      data: [{ x: 189.88, y: 172.81, text: "x" }, { x: 150.88, y: 214.81, text: "y" }],
      style: { size: 4 },
    },
  ],
});

retrosheet

Baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. Data: 1 x grows. 1 y grows. 1 first base. 2 axes.1 x grows1 y grows1 first basefirst base: 63.64, 63.642 axesxy

Retrosheet hit locations (zone centres, in feet). First base is (63.64, 63.64) in feet; the arrows show which way x (blue) and y (orange) grow.

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",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "retrosheet",
      data: [{ x: 63.64, y: 63.64, x2: 142.84, y2: 63.64 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "retrosheet",
      data: [{ x: 63.64, y: 63.64, x2: 63.64, y2: 121.24 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "first base",
      from: "retrosheet",
      data: [{ x: 63.64, y: 63.64, title: "first base: 63.64, 63.64" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "retrosheet",
      data: [{ x: 166.6, y: 63.64, text: "x" }, { x: 63.64, y: 144.28, text: "y" }],
      style: { size: 4 },
    },
  ],
});

curling

Curling sheetDrawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Data: 1 x grows. 1 y grows. 1 the middle of the back line. 2 axes.1 x grows1 y grows1 the middle of the back linethe middle of the back line: 0, 62 axesxy

Curling stones, in feet from the button. The middle of the back line is (0, 6) in feet; the arrows show which way x (blue) and y (orange) grow.

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: "curling",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "curling",
      surfaceSize: { length: 150, width: 15.58, unit: "ft" },
      data: [{ x: 0, y: 6, x2: 1.87, y2: 6 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "curling",
      surfaceSize: { length: 150, width: 15.58, unit: "ft" },
      data: [{ x: 0, y: 6, x2: 0, y2: 24 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the back line",
      from: "curling",
      surfaceSize: { length: 150, width: 15.58, unit: "ft" },
      data: [{ x: 0, y: 6, title: "the middle of the back line: 0, 6" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "curling",
      surfaceSize: { length: 150, width: 15.58, unit: "ft" },
      data: [{ x: 2.43, y: 6, text: "x" }, { x: 0, y: 31.2, text: "y" }],
      style: { size: 4 },
    },
  ],
});

tennis

Tennis courtDrawn as: a tennis court, 78 by 36 feet, with its baselines, singles and doubles sidelines, service lines, centre service lines, centre marks and the net. Data: 1 x grows. 1 y grows. 1 the T, where the centre service line meets the right service line. 2 axes.1 x grows1 y grows1 the T, where the centre service line meets the right service linethe T, where the centre service line meets the right service line: 21, 02 axesxy

Tennis court, in feet from the centre of the net. The T, where the centre service line meets the right service line is (21, 0) in feet; the arrows show which way x (blue) and y (orange) grow.

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: "tennis",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "tennis",
      data: [{ x: 21, y: 0, x2: 30.36, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "tennis",
      data: [{ x: 21, y: 0, x2: 21, y2: 4.32 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the T, where the centre service line meets the right service line",
      from: "tennis",
      data: [
        {
          x: 21,
          y: 0,
          title: "the T, where the centre service line meets the right service line: 21, 0",
        },
      ],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "tennis",
      data: [{ x: 33.17, y: 0, text: "x" }, { x: 21, y: 6.05, text: "y" }],
      style: { size: 4 },
    },
  ],
});

volleyball

Volleyball courtDrawn as: a volleyball court, 18 by 9 metres, with its centre line, attack lines, the net and its antennae. Data: 1 x grows. 1 y grows. 1 the middle of the right attack line. 2 axes.1 x grows1 y grows1 the middle of the right attack linethe middle of the right attack line: 3, 02 axesxy

Volleyball court, in metres from the centre of the net. The middle of the right attack line is (3, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "volleyball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "volleyball",
      surfaceSize: { length: 18, width: 9, unit: "m" },
      data: [{ x: 3, y: 0, x2: 5.16, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "volleyball",
      surfaceSize: { length: 18, width: 9, unit: "m" },
      data: [{ x: 3, y: 0, x2: 3, y2: 1.08 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right attack line",
      from: "volleyball",
      surfaceSize: { length: 18, width: 9, unit: "m" },
      data: [{ x: 3, y: 0, title: "the middle of the right attack line: 3, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "volleyball",
      surfaceSize: { length: 18, width: 9, unit: "m" },
      data: [{ x: 5.81, y: 0, text: "x" }, { x: 3, y: 1.51, text: "y" }],
      style: { size: 4 },
    },
  ],
});

badminton

Badminton courtDrawn as: a badminton court, 13.4 by 6.1 metres, with its singles and doubles lines, short and long service lines, centre lines and the net. Data: 1 x grows. 1 y grows. 1 the middle of the right short service line. 2 axes.1 x grows1 y grows1 the middle of the right short service linethe middle of the right short service line: 1.98, 02 axesxy

Badminton court, in metres from the centre of the net. The middle of the right short service line is (1.98, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "badminton",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "badminton",
      data: [{ x: 1.98, y: 0, x2: 3.59, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "badminton",
      data: [{ x: 1.98, y: 0, x2: 1.98, y2: 0.73 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right short service line",
      from: "badminton",
      data: [{ x: 1.98, y: 0, title: "the middle of the right short service line: 1.98, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "badminton",
      data: [{ x: 4.07, y: 0, text: "x" }, { x: 1.98, y: 1.02, text: "y" }],
      style: { size: 4 },
    },
  ],
});

pickleball

Pickleball courtDrawn as: a pickleball court, 44 by 20 feet, with its non-volley zones, centre lines and the net. Data: 1 x grows. 1 y grows. 1 the middle of the right non-volley zone line. 2 axes.1 x grows1 y grows1 the middle of the right non-volley zone linethe middle of the right non-volley zone line: 7, 02 axesxy

Pickleball court, in feet from the centre of the net. The middle of the right non-volley zone line is (7, 0) in feet; the arrows show which way x (blue) and y (orange) grow.

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: "pickleball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "pickleball",
      data: [{ x: 7, y: 0, x2: 12.28, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "pickleball",
      data: [{ x: 7, y: 0, x2: 7, y2: 2.4 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right non-volley zone line",
      from: "pickleball",
      data: [{ x: 7, y: 0, title: "the middle of the right non-volley zone line: 7, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "pickleball",
      data: [{ x: 13.86, y: 0, text: "x" }, { x: 7, y: 3.36, text: "y" }],
      style: { size: 4 },
    },
  ],
});

tabletennis

Table tennis tableDrawn as: a table tennis table, 2.74 by 1.525 metres, with its side lines, end lines, centre line and the net. Data: 1 x grows. 1 y grows. 1 the middle of the right end line. 2 axes.1 x grows1 y grows1 the middle of the right end linethe middle of the right end line: 1.37, 02 axesxy

Table tennis table, in metres from the centre of the net. The middle of the right end line is (1.37, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "tabletennis",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "tabletennis",
      data: [{ x: 1.37, y: 0, x2: 1.7, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "tabletennis",
      data: [{ x: 1.37, y: 0, x2: 1.37, y2: 0.18 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right end line",
      from: "tabletennis",
      data: [{ x: 1.37, y: 0, title: "the middle of the right end line: 1.37, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "tabletennis",
      data: [{ x: 1.8, y: 0, text: "x" }, { x: 1.37, y: 0.25, text: "y" }],
      style: { size: 4 },
    },
  ],
});

padel

Padel courtDrawn as: a padel court, 20 by 10 metres, with its service lines, central service lines, the net, and the walls and metal fence of its enclosure. Data: 1 x grows. 1 y grows. 1 the middle of the right service line. 2 axes.1 x grows1 y grows1 the middle of the right service linethe middle of the right service line: 6.95, 02 axesxy

Padel court, in metres from the centre of the net. The middle of the right service line is (6.95, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "padel",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "padel",
      data: [{ x: 6.95, y: 0, x2: 9.35, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "padel",
      data: [{ x: 6.95, y: 0, x2: 6.95, y2: 1.2 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right service line",
      from: "padel",
      data: [{ x: 6.95, y: 0, title: "the middle of the right service line: 6.95, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "padel",
      data: [{ x: 10.07, y: 0, text: "x" }, { x: 6.95, y: 1.68, text: "y" }],
      style: { size: 4 },
    },
  ],
});

squash

Squash courtDrawn as: a squash court, 9.75 by 6.4 metres, with its short line, half court line and service boxes, the front wall laid flat beside it with its tin, service line and front wall line, and the walls round it. Data: 1 x grows. 1 y grows. 1 the middle of the short line. 2 axes.1 x grows1 y grows1 the middle of the short linethe middle of the short line: 0.59, 02 axesxy

Squash court, in metres from the centre of the court. The middle of the short line is (0.59, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "squash",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "squash",
      surfaceSize: { length: 9.75, width: 6.4, unit: "m" },
      data: [{ x: 0.59, y: 0, x2: 1.76, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "squash",
      surfaceSize: { length: 9.75, width: 6.4, unit: "m" },
      data: [{ x: 0.59, y: 0, x2: 0.59, y2: 1.01 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the short line",
      from: "squash",
      surfaceSize: { length: 9.75, width: 6.4, unit: "m" },
      data: [{ x: 0.59, y: 0, title: "the middle of the short line: 0.59, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "squash",
      surfaceSize: { length: 9.75, width: 6.4, unit: "m" },
      data: [{ x: 2.11, y: 0, text: "x" }, { x: 0.59, y: 1.41, text: "y" }],
      style: { size: 4 },
    },
  ],
});

racquetball

Racquetball courtDrawn as: a racquetball court, 40 by 20 feet, with its short line, service line, service boxes, drive serve lines and broken receiving line, and the walls round it. Data: 1 x grows. 1 y grows. 1 the middle of the short line (its back edge). 2 axes.1 x grows1 y grows1 the middle of the short line (its back edge)the middle of the short line (its back edge): 0, 02 axesxy

Racquetball court, in feet from the centre of the court. The middle of the short line (its back edge) is (0, 0) in feet; the arrows show which way x (blue) and y (orange) grow.

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: "racquetball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "racquetball",
      data: [{ x: 0, y: 0, x2: 4.8, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "racquetball",
      data: [{ x: 0, y: 0, x2: 0, y2: 2.4 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the short line (its back edge)",
      from: "racquetball",
      data: [{ x: 0, y: 0, title: "the middle of the short line (its back edge): 0, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "racquetball",
      data: [{ x: 6.24, y: 0, text: "x" }, { x: 0, y: 3.36, text: "y" }],
      style: { size: 4 },
    },
  ],
});

sepaktakraw

Sepak takraw courtDrawn as: a sepak takraw court, 13.4 by 6.1 metres, with its centre line, quarter circles, service circles and the net. Data: 1 x grows. 1 y grows. 1 the centre of the right service circle. 2 axes.1 x grows1 y grows1 the centre of the right service circlethe centre of the right service circle: 4.25, 02 axesxy

Sepak takraw court, in metres from the centre of the net. The centre of the right service circle is (4.25, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "sepaktakraw",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "sepaktakraw",
      data: [{ x: 4.25, y: 0, x2: 5.86, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "sepaktakraw",
      data: [{ x: 4.25, y: 0, x2: 4.25, y2: 0.73 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the centre of the right service circle",
      from: "sepaktakraw",
      data: [{ x: 4.25, y: 0, title: "the centre of the right service circle: 4.25, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "sepaktakraw",
      data: [{ x: 6.34, y: 0, text: "x" }, { x: 4.25, y: 1.02, text: "y" }],
      style: { size: 4 },
    },
  ],
});

teqball

Teqball courtDrawn as: a teqball court, 16 by 12 metres at the least, with the table and its net in the middle, the halfway line, the service lines and the court surrounds. Data: 1 x grows. 1 y grows. 1 the middle of the right service line. 2 axes.1 x grows1 y grows1 the middle of the right service linethe middle of the right service line: 3.5, 02 axesxy

Teqball court, in metres from the centre of the table and its net. The middle of the right service line is (3.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "teqball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "teqball",
      data: [{ x: 3.5, y: 0, x2: 5.42, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "teqball",
      data: [{ x: 3.5, y: 0, x2: 3.5, y2: 1.44 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right service line",
      from: "teqball",
      data: [{ x: 3.5, y: 0, title: "the middle of the right service line: 3.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "teqball",
      data: [{ x: 6, y: 0, text: "x" }, { x: 3.5, y: 2.02, text: "y" }],
      style: { size: 4 },
    },
  ],
});

roundnet

Roundnet courtDrawn as: a roundnet court, 10 by 10 metres at the least, with the set at its centre, the no hit zone line, the serving line and its four service positions. Data: 1 x grows. 1 y grows. 1 the right service position. 2 axes.1 x grows1 y grows1 the right service positionthe right service position: 2.6, 02 axesxy

Roundnet court, in metres from the centre of the set. The right service position is (2.6, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "roundnet",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "roundnet",
      data: [{ x: 2.6, y: 0, x2: 3.8, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "roundnet",
      data: [{ x: 2.6, y: 0, x2: 2.6, y2: 1.2 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right service position",
      from: "roundnet",
      data: [{ x: 2.6, y: 0, title: "the right service position: 2.6, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "roundnet",
      data: [{ x: 4.16, y: 0, text: "x" }, { x: 2.6, y: 1.68, text: "y" }],
      style: { size: 4 },
    },
  ],
});

netball

Netball courtDrawn as: a netball court, 30.5 by 15.25 metres, with its transverse lines, centre circle, goal circles and goalposts. Data: 1 x grows. 1 y grows. 1 the middle of the right transverse line. 2 axes.1 x grows1 y grows1 the middle of the right transverse linethe middle of the right transverse line: 5.08, 02 axesxy

Netball court, in metres from the centre of the court. The middle of the right transverse line is (5.08, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "netball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "netball",
      data: [{ x: 5.08, y: 0, x2: 8.74, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "netball",
      data: [{ x: 5.08, y: 0, x2: 5.08, y2: 1.83 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right transverse line",
      from: "netball",
      data: [{ x: 5.08, y: 0, title: "the middle of the right transverse line: 5.08, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "netball",
      data: [{ x: 9.84, y: 0, text: "x" }, { x: 5.08, y: 2.56, text: "y" }],
      style: { size: 4 },
    },
  ],
});

lacrosse

Lacrosse fieldDrawn as: a lacrosse field, 100 by 60 metres, with its goals, creases and lines. Data: 1 x grows. 1 y grows. 1 the middle of the right restraining line. 2 axes.1 x grows1 y grows1 the middle of the right restraining linethe middle of the right restraining line: 16, 02 axesxy

Lacrosse surface, in metres from the centre. The middle of the right restraining line is (16, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "lacrosse",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "lacrosse",
      surfaceSize: { length: 328.0839895013123, width: 196.85039370078738, unit: "ft" },
      data: [{ x: 16, y: 0, x2: 28, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "lacrosse",
      surfaceSize: { length: 328.0839895013123, width: 196.85039370078738, unit: "ft" },
      data: [{ x: 16, y: 0, x2: 16, y2: 7.2 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right restraining line",
      from: "lacrosse",
      surfaceSize: { length: 328.0839895013123, width: 196.85039370078738, unit: "ft" },
      data: [{ x: 16, y: 0, title: "the middle of the right restraining line: 16, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "lacrosse",
      surfaceSize: { length: 328.0839895013123, width: 196.85039370078738, unit: "ft" },
      data: [{ x: 31.6, y: 0, text: "x" }, { x: 16, y: 10.08, text: "y" }],
      style: { size: 4 },
    },
  ],
});

rugby

Rugby union fieldDrawn as: a rugby union field, 120 by 70 metres with its in-goal areas, with the 22-metre lines, the half-way line, the dash lines and the goal posts. Data: 1 x grows. 1 y grows. 1 the middle of the right 22-metre line. 2 axes.1 x grows1 y grows1 the middle of the right 22-metre linethe middle of the right 22-metre line: 28, 02 axesxy

Rugby field, in metres from the centre, the in-goal areas included. The middle of the right 22-metre line is (28, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "rugby",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "rugby",
      surfaceSize: { length: 393.70078740157476, width: 229.6587926509186, unit: "ft" },
      data: [{ x: 28, y: 0, x2: 42.4, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "rugby",
      surfaceSize: { length: 393.70078740157476, width: 229.6587926509186, unit: "ft" },
      data: [{ x: 28, y: 0, x2: 28, y2: 8.4 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right 22-metre line",
      from: "rugby",
      surfaceSize: { length: 393.70078740157476, width: 229.6587926509186, unit: "ft" },
      data: [{ x: 28, y: 0, title: "the middle of the right 22-metre line: 28, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "rugby",
      surfaceSize: { length: 393.70078740157476, width: 229.6587926509186, unit: "ft" },
      data: [{ x: 46.72, y: 0, text: "x" }, { x: 28, y: 11.76, text: "y" }],
      style: { size: 4 },
    },
  ],
});

afl

Australian football groundDrawn as: an Australian football ground, 160 by 141 metres, an oval with the goal squares, the centre square and circles, the fifty metre arcs, and the goal posts and behind posts. Data: 1 x grows. 1 y grows. 1 the middle of the right Fifty Metre Arc. 2 axes.1 x grows1 y grows1 the middle of the right Fifty Metre Arcthe middle of the right Fifty Metre Arc: 30, 02 axesxy

Australian football ground, in metres from the centre. The middle of the right Fifty Metre Arc is (30, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "afl",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "afl",
      surfaceSize: { length: 524.9343832020996, width: 462.59842519685037, unit: "ft" },
      data: [{ x: 30, y: 0, x2: 49.2, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "afl",
      surfaceSize: { length: 524.9343832020996, width: 462.59842519685037, unit: "ft" },
      data: [{ x: 30, y: 0, x2: 30, y2: 16.92 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right Fifty Metre Arc",
      from: "afl",
      surfaceSize: { length: 524.9343832020996, width: 462.59842519685037, unit: "ft" },
      data: [{ x: 30, y: 0, title: "the middle of the right Fifty Metre Arc: 30, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "afl",
      surfaceSize: { length: 524.9343832020996, width: 462.59842519685037, unit: "ft" },
      data: [{ x: 54.96, y: 0, text: "x" }, { x: 30, y: 23.69, text: "y" }],
      style: { size: 4 },
    },
  ],
});

gaelic

Gaelic football fieldDrawn as: a field for Gaelic football, 145 by 90 metres, with its lines across, the two rectangles at each end, the 13 and 40 metre arcs, the penalty point and the goalposts. Data: 1 x grows. 1 y grows. 1 the middle of the right 45 m line. 2 axes.1 x grows1 y grows1 the middle of the right 45 m linethe middle of the right 45 m line: 27.5, 02 axesxy

Gaelic games field, in metres from the centre. The middle of the right 45 m line is (27.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "gaelic",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "gaelic",
      surfaceSize: { length: 475.72178477690284, width: 295.2755905511811, unit: "ft" },
      data: [{ x: 27.5, y: 0, x2: 44.9, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "gaelic",
      surfaceSize: { length: 475.72178477690284, width: 295.2755905511811, unit: "ft" },
      data: [{ x: 27.5, y: 0, x2: 27.5, y2: 10.8 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right 45 m line",
      from: "gaelic",
      surfaceSize: { length: 475.72178477690284, width: 295.2755905511811, unit: "ft" },
      data: [{ x: 27.5, y: 0, title: "the middle of the right 45 m line: 27.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "gaelic",
      surfaceSize: { length: 475.72178477690284, width: 295.2755905511811, unit: "ft" },
      data: [{ x: 50.12, y: 0, text: "x" }, { x: 27.5, y: 15.12, text: "y" }],
      style: { size: 4 },
    },
  ],
});

cricket

Cricket groundDrawn as: a cricket ground, 150 by 150 yards, with its boundary, the pitch with its creases and wickets, and the fielding restriction's circle where the rules have one. Data: 1 x grows. 1 y grows. 1 the middle of the right bowling crease. 2 axes.1 x grows1 y grows1 the middle of the right bowling creasethe middle of the right bowling crease: 11, 02 axesxy

Cricket ground, in yards from the middle of the pitch. The middle of the right bowling crease is (11, 0) in yards; the arrows show which way x (blue) and y (orange) grow.

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: "cricket",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "cricket",
      surfaceSize: { length: 450, width: 450, unit: "ft" },
      data: [{ x: 11, y: 0, x2: 29, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "cricket",
      surfaceSize: { length: 450, width: 450, unit: "ft" },
      data: [{ x: 11, y: 0, x2: 11, y2: 18 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right bowling crease",
      from: "cricket",
      surfaceSize: { length: 450, width: 450, unit: "ft" },
      data: [{ x: 11, y: 0, title: "the middle of the right bowling crease: 11, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "cricket",
      surfaceSize: { length: 450, width: 450, unit: "ft" },
      data: [{ x: 34.4, y: 0, text: "x" }, { x: 11, y: 25.2, text: "y" }],
      style: { size: 4 },
    },
  ],
});

fieldhockey

Field hockey pitchDrawn as: a field hockey pitch, 91.4 by 55 metres, with the centre line, the 23-metre lines, the circles, the penalty spots and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty spot. 2 axes.1 x grows1 y grows1 the right penalty spotthe right penalty spot: 39.2, 02 axesxy

Field hockey pitch, in metres from the centre. The right penalty spot is (39.2, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "fieldhockey",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "fieldhockey",
      surfaceSize: { length: 299.86876640419945, width: 180.44619422572177, unit: "ft" },
      data: [{ x: 39.2, y: 0, x2: 50.17, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "fieldhockey",
      surfaceSize: { length: 299.86876640419945, width: 180.44619422572177, unit: "ft" },
      data: [{ x: 39.2, y: 0, x2: 39.2, y2: 6.6 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty spot",
      from: "fieldhockey",
      surfaceSize: { length: 299.86876640419945, width: 180.44619422572177, unit: "ft" },
      data: [{ x: 39.2, y: 0, title: "the right penalty spot: 39.2, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "fieldhockey",
      surfaceSize: { length: 299.86876640419945, width: 180.44619422572177, unit: "ft" },
      data: [{ x: 53.46, y: 0, text: "x" }, { x: 39.2, y: 9.24, text: "y" }],
      style: { size: 4 },
    },
  ],
});

handball

Handball courtDrawn as: a handball court, 40 by 20 metres, with the centre line, the goal areas, the 6-, 7- and 9-metre lines, the 4-metre lines and the goals. Data: 1 x grows. 1 y grows. 1 the middle of the right 7-metre line. 2 axes.1 x grows1 y grows1 the middle of the right 7-metre linethe middle of the right 7-metre line: 13, 02 axesxy

Handball court, in metres from the centre. The middle of the right 7-metre line is (13, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "handball",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "handball",
      surfaceSize: { length: 131.2335958005249, width: 65.61679790026245, unit: "ft" },
      data: [{ x: 13, y: 0, x2: 17.8, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "handball",
      surfaceSize: { length: 131.2335958005249, width: 65.61679790026245, unit: "ft" },
      data: [{ x: 13, y: 0, x2: 13, y2: 2.4 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right 7-metre line",
      from: "handball",
      surfaceSize: { length: 131.2335958005249, width: 65.61679790026245, unit: "ft" },
      data: [{ x: 13, y: 0, title: "the middle of the right 7-metre line: 13, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "handball",
      surfaceSize: { length: 131.2335958005249, width: 65.61679790026245, unit: "ft" },
      data: [{ x: 19.24, y: 0, text: "x" }, { x: 13, y: 3.36, text: "y" }],
      style: { size: 4 },
    },
  ],
});

swimming

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Data: 1 x grows. 1 y grows. 1 the 15 m cross line in lane 1. 2 axes.88776655443322111 x grows1 y grows1 the 15 m cross line in lane 1the 15 m cross line in lane 1: -10, -8.752 axesxy

Swimming pool, in metres from the centre of the water. The 15 m cross line in lane 1 is (-10, -8.75) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "swimming",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "swimming",
      surfaceSize: { length: 50, width: 25, unit: "m" },
      data: [{ x: -10, y: -8.75, x2: -4, y2: -8.75 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "swimming",
      surfaceSize: { length: 50, width: 25, unit: "m" },
      data: [{ x: -10, y: -8.75, x2: -10, y2: -5.63 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the 15 m cross line in lane 1",
      from: "swimming",
      surfaceSize: { length: 50, width: 25, unit: "m" },
      data: [{ x: -10, y: -8.75, title: "the 15 m cross line in lane 1: -10, -8.75" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "swimming",
      surfaceSize: { length: 50, width: 25, unit: "m" },
      data: [{ x: -2.2, y: -8.75, text: "x" }, { x: -10, y: -4.38, text: "y" }],
      style: { size: 4 },
    },
  ],
});

waterpolo

Water polo fieldDrawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas. Data: 1 x grows. 1 y grows. 1 the 5 m mark in front of the left goal. 2 axes.1 x grows1 y grows1 the 5 m mark in front of the left goalthe 5 m mark in front of the left goal: -7.5, 02 axesxy

Water polo pool, in metres from the centre of the water. The 5 m mark in front of the left goal is (-7.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "waterpolo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "waterpolo",
      surfaceSize: { length: 25.6, width: 20, unit: "m" },
      data: [{ x: -7.5, y: 0, x2: -4.43, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "waterpolo",
      surfaceSize: { length: 25.6, width: 20, unit: "m" },
      data: [{ x: -7.5, y: 0, x2: -7.5, y2: 2.4 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the 5 m mark in front of the left goal",
      from: "waterpolo",
      surfaceSize: { length: 25.6, width: 20, unit: "m" },
      data: [{ x: -7.5, y: 0, title: "the 5 m mark in front of the left goal: -7.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "waterpolo",
      surfaceSize: { length: 25.6, width: 20, unit: "m" },
      data: [{ x: -3.51, y: 0, text: "x" }, { x: -7.5, y: 3.36, text: "y" }],
      style: { size: 4 },
    },
  ],
});

diving

Diving wellDrawn as: a diving well, 21 by 25.9 metres, with springboards at 1 and 3 metres and platforms at 5, 7.5 and 10 metres. Data: 1 x grows. 1 y grows. 1 the plummet of the 10 m platform. 2 axes.5 m7.5 m10 m1 m1 m3 m3 m1 x grows1 y grows1 the plummet of the 10 m platformthe plummet of the 10 m platform: -9, 6.752 axesxy

Diving well, in metres from the centre of the water. The plummet of the 10 m platform is (-9, 6.75) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "diving",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "diving",
      surfaceSize: { length: 21, width: 25.9, unit: "m" },
      data: [{ x: -9, y: 6.75, x2: -6.48, y2: 6.75 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "diving",
      surfaceSize: { length: 21, width: 25.9, unit: "m" },
      data: [{ x: -9, y: 6.75, x2: -9, y2: 9.99 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the plummet of the 10 m platform",
      from: "diving",
      surfaceSize: { length: 21, width: 25.9, unit: "m" },
      data: [{ x: -9, y: 6.75, title: "the plummet of the 10 m platform: -9, 6.75" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "diving",
      surfaceSize: { length: 21, width: 25.9, unit: "m" },
      data: [{ x: -5.72, y: 6.75, text: "x" }, { x: -9, y: 11.29, text: "y" }],
      style: { size: 4 },
    },
  ],
});

artisticswimming

Artistic swimming poolDrawn as: an artistic swimming area, 30 by 20 metres, with the lines on the floor, the judges' platform and the starting platform. Data: 1 x grows. 1 y grows. 1 centre stage, at the pool's edge. 2 axes.1 x grows1 y grows1 centre stage, at the pool's edgecentre stage, at the pool's edge: 0, -102 axesxy

Artistic swimming area, in metres from the centre of the water. Centre stage, at the pool's edge is (0, -10) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "artisticswimming",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "artisticswimming",
      surfaceSize: { length: 30, width: 20, unit: "m" },
      data: [{ x: 0, y: -10, x2: 3.6, y2: -10 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "artisticswimming",
      surfaceSize: { length: 30, width: 20, unit: "m" },
      data: [{ x: 0, y: -10, x2: 0, y2: -7.6 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "centre stage, at the pool's edge",
      from: "artisticswimming",
      surfaceSize: { length: 30, width: 20, unit: "m" },
      data: [{ x: 0, y: -10, title: "centre stage, at the pool's edge: 0, -10" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "artisticswimming",
      surfaceSize: { length: 30, width: 20, unit: "m" },
      data: [{ x: 4.68, y: -10, text: "x" }, { x: 0, y: -6.64, text: "y" }],
      style: { size: 4 },
    },
  ],
});

athletics

Athletics trackDrawn as: an athletics track of 400 metres with 8 lanes, its bends of 36.50 metres radius at the kerb and its straights of 84.39 metres, with the finish line and the lane numbers. A soccer pitch lies inside the track. Field events marked: High jump, Pole vault, Long jump, Triple jump, Shot put, Discus throw, Hammer throw, Javelin throw. Data: 1 x grows. 1 y grows. 1 the finish line on lane 1's running line. 2 axes.1 x grows1 y grows1 the finish line on lane 1's running linethe finish line on lane 1's running line: 42.19, 40.32 axesxy

Athletics stadium, in metres from the middle of the track. The finish line on lane 1's running line is (42.19, 40.3) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "athletics",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "athletics",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 42.19, y: 40.3, x2: 66.19, y2: 40.3 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "athletics",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 42.19, y: 40.3, x2: 42.19, y2: 54.7 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the finish line on lane 1's running line",
      from: "athletics",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 42.19, y: 40.3, title: "the finish line on lane 1's running line: 42.19, 40.3" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "athletics",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 73.39, y: 40.3, text: "x" }, { x: 42.19, y: 60.46, text: "y" }],
      style: { size: 4 },
    },
  ],
});

skating

Skating rinkDrawn as: a speed skating track of 400 metres, its inner lane and its outer lane, the inner curve of 25 metres radius, the outer lane 4 metres wide and the straights 113.57 metres long, with the warm-up lane, the blocks of the curves and the finishing line. Data: 1 x grows. 1 y grows. 1 the finishing line on the inner lane's line (the long track). 2 axes.1 x grows1 y grows1 the finishing line on the inner lane's line (the long track)the finishing line on the inner lane's line (the long track): 43.2, 25.52 axesxy

Skating rink, in metres from the middle of the rink. The finishing line on the inner lane's line (the long track) is (43.2, 25.5) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "skating",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "skating",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 43.2, y: 25.5, x2: 67.2, y2: 25.5 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "skating",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 43.2, y: 25.5, x2: 43.2, y2: 39.9 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the finishing line on the inner lane's line (the long track)",
      from: "skating",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [
        {
          x: 43.2,
          y: 25.5,
          title: "the finishing line on the inner lane's line (the long track): 43.2, 25.5",
        },
      ],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "skating",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 74.4, y: 25.5, text: "x" }, { x: 43.2, y: 45.66, text: "y" }],
      style: { size: 4 },
    },
  ],
});

judo

Judo contest areaDrawn as: a judo contest area of 10 by 10 metres in a safety area 4 metres wide, laid with tatami of 2 by 1 metres. The tape that marks where the contestants start lies at the centre, 4 metres apart. Data: 1 x grows. 1 y grows. 1 the middle of the tape where the contestant to the referee's right starts. 2 axes.1 x grows1 y grows1 the middle of the tape where the contestant to the referee's right startsthe middle of the tape where the contestant to the referee's right starts: 2, 02 axesxy

Judo competition area, in metres from the centre of the tatami. The middle of the tape where the contestant to the referee's right starts is (2, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "judo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "judo",
      surfaceSize: { length: 18, width: 18, unit: "m" },
      data: [{ x: 2, y: 0, x2: 4.16, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "judo",
      surfaceSize: { length: 18, width: 18, unit: "m" },
      data: [{ x: 2, y: 0, x2: 2, y2: 2.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the tape where the contestant to the referee's right starts",
      from: "judo",
      surfaceSize: { length: 18, width: 18, unit: "m" },
      data: [
        {
          x: 2,
          y: 0,
          title: "the middle of the tape where the contestant to the referee's right starts: 2, 0",
        },
      ],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "judo",
      surfaceSize: { length: 18, width: 18, unit: "m" },
      data: [{ x: 4.81, y: 0, text: "x" }, { x: 2, y: 3.02, text: "y" }],
      style: { size: 4 },
    },
  ],
});

karate

Karate competition areaDrawn as: a karate kumite area: a matted square of 8 metres with its outer metre in another colour, in a safety area 2 metres wide, with the two start mats. The table, the referee and the four judges are marked. Data: 1 x grows. 1 y grows. 1 the middle of the right start mat. 2 axes.1 x grows1 y grows1 the middle of the right start matthe middle of the right start mat: 1.5, 02 axesxy

Karate competition area, in metres from the centre of the mats. The middle of the right start mat is (1.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "karate",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "karate",
      surfaceSize: { length: 12, width: 12, unit: "m" },
      data: [{ x: 1.5, y: 0, x2: 2.94, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "karate",
      surfaceSize: { length: 12, width: 12, unit: "m" },
      data: [{ x: 1.5, y: 0, x2: 1.5, y2: 1.44 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right start mat",
      from: "karate",
      surfaceSize: { length: 12, width: 12, unit: "m" },
      data: [{ x: 1.5, y: 0, title: "the middle of the right start mat: 1.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "karate",
      surfaceSize: { length: 12, width: 12, unit: "m" },
      data: [{ x: 3.37, y: 0, text: "x" }, { x: 1.5, y: 2.02, text: "y" }],
      style: { size: 4 },
    },
  ],
});

kendo

Kendo shiai-joDrawn as: a kendo shiai-jo: a wooden floor of 10 by 10 metres with white boundary lines, the cross at the centre and the two kaishi-sen, and 1.5 metres kept clear outside it. Data: 1 x grows. 1 y grows. 1 the middle of the right kaishi-sen. 2 axes.1 x grows1 y grows1 the middle of the right kaishi-senthe middle of the right kaishi-sen: 1.4, 02 axesxy

Kendo shiai-jo, in metres from the centre. The middle of the right kaishi-sen is (1.4, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "kendo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "kendo",
      surfaceSize: { length: 10, width: 10, unit: "m" },
      data: [{ x: 1.4, y: 0, x2: 2.6, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "kendo",
      surfaceSize: { length: 10, width: 10, unit: "m" },
      data: [{ x: 1.4, y: 0, x2: 1.4, y2: 1.2 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right kaishi-sen",
      from: "kendo",
      surfaceSize: { length: 10, width: 10, unit: "m" },
      data: [{ x: 1.4, y: 0, title: "the middle of the right kaishi-sen: 1.4, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "kendo",
      surfaceSize: { length: 10, width: 10, unit: "m" },
      data: [{ x: 2.96, y: 0, text: "x" }, { x: 1.4, y: 1.68, text: "y" }],
      style: { size: 4 },
    },
  ],
});

sumo

Sumo dohyōDrawn as: a sumo dohyō: a clay square of 6.7 metres, 55 centimetres high, with a ring of 4.55 metres made of 20 tawara, the sand of the jano-me and the two shikiri-sen. Data: 1 x grows. 1 y grows. 1 the middle of the right shikiri-sen. 2 axes.1 x grows1 y grows1 the middle of the right shikiri-senthe middle of the right shikiri-sen: 0.38, 02 axesxy

Sumo dohyō, in metres from the centre of the ring. The middle of the right shikiri-sen is (0.38, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "sumo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "sumo",
      surfaceSize: { length: 6.7, width: 6.7, unit: "m" },
      data: [{ x: 0.38, y: 0, x2: 1.18, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "sumo",
      surfaceSize: { length: 6.7, width: 6.7, unit: "m" },
      data: [{ x: 0.38, y: 0, x2: 0.38, y2: 0.8 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the right shikiri-sen",
      from: "sumo",
      surfaceSize: { length: 6.7, width: 6.7, unit: "m" },
      data: [{ x: 0.38, y: 0, title: "the middle of the right shikiri-sen: 0.38, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "sumo",
      surfaceSize: { length: 6.7, width: 6.7, unit: "m" },
      data: [{ x: 1.42, y: 0, text: "x" }, { x: 0.38, y: 1.12, text: "y" }],
      style: { size: 4 },
    },
  ],
});

kyudo

Kyūdō rangeDrawn as: a kyūdōjō for kinteki: a shajō with 5 shooting positions, 28 metres from the targets at the azuchi, with the yamichi between them and the path for fetching the arrows beside it. Data: 1 x grows. 1 y grows. 1 the face of the first target on the azuchi. 2 axes.1 x grows1 y grows1 the face of the first target on the azuchithe face of the first target on the azuchi: 17.5, 5.42 axesxy

Kyūdōjō, in metres from the middle of the range. The face of the first target on the azuchi is (17.5, 5.4) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "kyudo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "kyudo",
      surfaceSize: { length: 37.8, width: 16.2, unit: "m" },
      data: [{ x: 17.5, y: 5.4, x2: 22.04, y2: 5.4 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "kyudo",
      surfaceSize: { length: 37.8, width: 16.2, unit: "m" },
      data: [{ x: 17.5, y: 5.4, x2: 17.5, y2: 7.34 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the face of the first target on the azuchi",
      from: "kyudo",
      surfaceSize: { length: 37.8, width: 16.2, unit: "m" },
      data: [{ x: 17.5, y: 5.4, title: "the face of the first target on the azuchi: 17.5, 5.4" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "kyudo",
      surfaceSize: { length: 37.8, width: 16.2, unit: "m" },
      data: [{ x: 23.4, y: 5.4, text: "x" }, { x: 17.5, y: 8.12, text: "y" }],
      style: { size: 4 },
    },
  ],
});

dojo

DojoDrawn as: a dojo of 20 jō, 7.28 by 4.55 metres, laid with tatami of 1.82 by 0.91 metres metres so that no four corners meet. The kamiza is at the north. Data: 1 x grows. 1 y grows. 1 the middle of the floor. 2 axes.1 x grows1 y grows1 the middle of the floorthe middle of the floor: 0, 02 axesxy

Dojo, in metres from the centre of the floor. The middle of the floor is (0, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "dojo",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "dojo",
      surfaceSize: { length: 7.28, width: 4.55, unit: "m" },
      data: [{ x: 0, y: 0, x2: 0.87, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "dojo",
      surfaceSize: { length: 7.28, width: 4.55, unit: "m" },
      data: [{ x: 0, y: 0, x2: 0, y2: 0.55 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the middle of the floor",
      from: "dojo",
      surfaceSize: { length: 7.28, width: 4.55, unit: "m" },
      data: [{ x: 0, y: 0, title: "the middle of the floor: 0, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "dojo",
      surfaceSize: { length: 7.28, width: 4.55, unit: "m" },
      data: [{ x: 1.13, y: 0, text: "x" }, { x: 0, y: 0.77, text: "y" }],
      style: { size: 4 },
    },
  ],
});

opta

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 88.5, 502 axesxy

Opta / Stats Perform pitch coordinates. The right penalty mark is (88.5, 50) in percent; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "opta",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "opta",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 88.5, y: 50, x2: 100.5, y2: 50 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "opta",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 88.5, y: 50, x2: 88.5, y2: 62 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "opta",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 88.5, y: 50, title: "the right penalty mark: 88.5, 50" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "opta",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 104.1, y: 50, text: "x" }, { x: 88.5, y: 66.8, text: "y" }],
      style: { size: 4 },
    },
  ],
});

statsbomb

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 108, 402 axesxy

StatsBomb pitch coordinates. The right penalty mark is (108, 40) in yards; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "statsbomb",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "statsbomb",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 108, y: 40, x2: 122.4, y2: 40 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "statsbomb",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 108, y: 40, x2: 108, y2: 49.6 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "statsbomb",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 108, y: 40, title: "the right penalty mark: 108, 40" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "statsbomb",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 126.72, y: 40, text: "x" }, { x: 108, y: 53.44, text: "y" }],
      style: { size: 4 },
    },
  ],
});

wyscout

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 90, 502 axesxy

Wyscout pitch coordinates. The right penalty mark is (90, 50) in percent; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "wyscout",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "wyscout",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 90, y: 50, x2: 102, y2: 50 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "wyscout",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 90, y: 50, x2: 90, y2: 62 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "wyscout",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 90, y: 50, title: "the right penalty mark: 90, 50" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "wyscout",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 105.6, y: 50, text: "x" }, { x: 90, y: 66.8, text: "y" }],
      style: { size: 4 },
    },
  ],
});

tracab

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 4150, 02 axesxy

Tracab pitch coordinates. The right penalty mark is (4150, 0) in centimetres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "tracab",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "tracab",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 4150, y: 0, x2: 5410, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "tracab",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 4150, y: 0, x2: 4150, y2: 816 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "tracab",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 4150, y: 0, title: "the right penalty mark: 4150, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "tracab",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 5788, y: 0, text: "x" }, { x: 4150, y: 1142.4, text: "y" }],
      style: { size: 4 },
    },
  ],
});

metrica

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 0.9, 0.52 axesxy

Metrica Sports pitch coordinates. The right penalty mark is (0.9, 0.5) in fractions; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "metrica",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "metrica",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 0.9, y: 0.5, x2: 1.02, y2: 0.5 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "metrica",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 0.9, y: 0.5, x2: 0.9, y2: 0.62 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "metrica",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 0.9, y: 0.5, title: "the right penalty mark: 0.9, 0.5" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "metrica",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 1.06, y: 0.5, text: "x" }, { x: 0.9, y: 0.67, text: "y" }],
      style: { size: 4 },
    },
  ],
});

skillcorner

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 41.5, 02 axesxy

SkillCorner pitch coordinates. The right penalty mark is (41.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "skillcorner",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "skillcorner",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 54.1, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "skillcorner",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 41.5, y2: 8.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "skillcorner",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, title: "the right penalty mark: 41.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "skillcorner",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 57.88, y: 0, text: "x" }, { x: 41.5, y: 11.42, text: "y" }],
      style: { size: 4 },
    },
  ],
});

secondspectrum

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 41.5, 02 axesxy

Second Spectrum pitch coordinates. The right penalty mark is (41.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "secondspectrum",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "secondspectrum",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 54.1, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "secondspectrum",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 41.5, y2: 8.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "secondspectrum",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, title: "the right penalty mark: 41.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "secondspectrum",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 57.88, y: 0, text: "x" }, { x: 41.5, y: 11.42, text: "y" }],
      style: { size: 4 },
    },
  ],
});

impect

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 41.5, 02 axesxy

Impect pitch coordinates. The right penalty mark is (41.5, 0) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "impect",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "impect",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 54.1, y2: 0 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "impect",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, x2: 41.5, y2: 8.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "impect",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 41.5, y: 0, title: "the right penalty mark: 41.5, 0" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "impect",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 57.88, y: 0, text: "x" }, { x: 41.5, y: 11.42, text: "y" }],
      style: { size: 4 },
    },
  ],
});

uefa

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 94, 342 axesxy

UEFA pitch coordinates. The right penalty mark is (94, 34) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "uefa",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "uefa",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, x2: 106.6, y2: 34 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "uefa",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, x2: 94, y2: 42.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "uefa",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, title: "the right penalty mark: 94, 34" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "uefa",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 110.38, y: 34, text: "x" }, { x: 94, y: 45.42, text: "y" }],
      style: { size: 4 },
    },
  ],
});

international

Soccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals. Data: 1 x grows. 1 y grows. 1 the right penalty mark. 2 axes.1 x grows1 y grows1 the right penalty markthe right penalty mark: 94, 342 axesxy

International pitch coordinates. The right penalty mark is (94, 34) in metres; the arrows show which way x (blue) and y (orange) grow.

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: "soccer",
  pitchType: "international",
  layers: [
    {
      kind: "arrows",
      name: "x grows",
      from: "international",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, x2: 106.6, y2: 34 }],
      style: { width: 1.2, color: "var(--ky-layer-home)" },
    },
    {
      kind: "arrows",
      name: "y grows",
      from: "international",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, x2: 94, y2: 42.16 }],
      style: { width: 1.2, color: "var(--ky-layer-away)" },
    },
    {
      kind: "points",
      name: "the right penalty mark",
      from: "international",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 94, y: 34, title: "the right penalty mark: 94, 34" }],
      style: { size: 4, shape: "star" },
    },
    {
      kind: "text",
      name: "axes",
      from: "international",
      surfaceSize: { length: 105, width: 68, unit: "m" },
      data: [{ x: 110.38, y: 34, text: "x" }, { x: 94, y: 45.42, text: "y" }],
      style: { size: 4 },
    },
  ],
});

Using a frame#

import { convert, fromSurface, toSurface } from "@johnmorrisdotca/kyogijo-stadiums/frames";

// The right end-zone face-off dot: 69 feet from centre ice, 22 to one side.
console.log(toSurface([[69, 22]], { from: "nhl-api" }), toSurface([[507, 150 - (22 * 300) / 85]], { from: "hockeytech" })[0].map((n) => Math.round(n * 100) / 100));
// [ [ 169, 20.5 ] ] [ 169, 20.5 ]

// The same point in metres lands where the point in feet does, and goes back.
const metres = toSurface([[69, 22]], { from: "nhl-api", units: "m" });
console.log(metres[0].map((n) => n.toFixed(3)), fromSurface(metres, { to: "nhl-api", units: "m" })[0].map((n) => Math.round(n)));
// [ '51.511', '6.248' ] [ 69, 22 ]

// A team that attacked the left end in a period is turned a half turn, so that every shot attacks the right.
console.log(toSurface([[69, 22]], { from: "nhl-api", attacking: "left" }), convert("hockeytech", "nhl-api")([[600, 0]]));
// [ [ 31, 64.5 ] ] [ [ 100, 42.5 ] ]
  • Units, anchors and limits. units is the unit of the surface's numbers (feet by default); anchors replace a frame's landmarks with your own for a venue whose markings differ, and limits keeps points on the surface ("surface") or in a box. Anchors and limits are converted with units, not only the points.
  • Ends. attacking: "left" turns points a half turn about the middle of the surface. attackingIn("nhl", period, "right") says which end a team attacks in a period (hockey changes ends every period, football after the first and third quarters, basketball at the half); for a period no rule here settles, pass changedAfter. A baseball frame has no ends and refuses attacking.
  • Your own frame. registerFrame(frame) adds one to FRAMES, and piecewise(landmarks) is the mapper the frames use: straight between landmarks. A frame for a surface of any size takes its landmarks as a function of the surface's size, and toSurface is then given size.

Edit this page on GitHub