Kyogijo Stadiums競技場

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

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

Gallery: looks and annotations

The named looks on four sports, colours by feature, line widths and dashes, goal styles, mowing patterns, and the arrows, axes and labels that mark a surface for teaching. Every picture is drawn by the build from the code under it. The pictures share one stylesheet, which is left out of each one's SVG here; drawKyogijo puts it in every drawing unless style: "none" says not to.

Named looks#

look paints the surface, its lines and the ground round it in one palette. Each look is shown on the rink, the court, the field and the ballpark; the page's theme makes them light or dark.

grass: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "grass" });

grass: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "grass" });

grass: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "grass" });

grass: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "grass" });

night: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "night" });

night: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "night" });

night: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "night" });

night: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "night" });

chalkboard: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "chalkboard" });

chalkboard: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "chalkboard" });

chalkboard: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "chalkboard" });

chalkboard: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "chalkboard" });

blueprint: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "blueprint" });

blueprint: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "blueprint" });

blueprint: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "blueprint" });

blueprint: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "blueprint" });

print: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "print" });

print: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "print" });

print: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "print" });

print: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "print" });

broadcast: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "broadcast" });

broadcast: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "broadcast" });

broadcast: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "broadcast" });

broadcast: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "broadcast" });

high-contrast: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "high-contrast" });

high-contrast: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "high-contrast" });

high-contrast: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "high-contrast" });

high-contrast: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "high-contrast" });

line-drawing: NHL rink

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", look: "line-drawing" });

line-drawing: NBA court

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", look: "line-drawing" });

line-drawing: NFL field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", look: "line-drawing" });

line-drawing: Baseball field

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", look: "line-drawing" });

Colours by feature#

featureColors colours a part by its name; FEATURES lists the names (the rink has 17, the court 18, the pitch 14).

Rink: blue lines, circles and nets

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "nhl",
  featureColors: {
    "blue-lines": "#0a7d3b",
    "face-off-circles": "#e07b00",
    "face-off-dots": "#e07b00",
    nets: "#1d4f91",
    crease: "#ffd9a0",
  },
});

Pitch: areas, goals and the centre circle

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "soccer",
  featureColors: {
    "penalty-areas": "#ffe600",
    goals: "#ff3df2",
    "centre-circle": "#00e5ff",
    mowing: "#2f8f4a",
  },
});

Court: rims, backboards and the key

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "nba",
  featureColors: { key: "#6a3d9a", rims: "#00a0ff", backboards: "#ffe600", "three-point-line": "#ffe600" },
});

Line widths, dashes and opacity#

lineWidth scales every painted line or sets the ordinary one to an absolute width; lineDash and lineOpacity do what they say.

Court, lines twice as wide

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", lineWidth: 2 });

Rink, the ordinary line 1 foot wide

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", lineWidth: { width: 1 } });

Pitch, dashed

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", lineDash: "dashed", lineWidth: 2 });

Court, dotted

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", lineDash: "dotted", lineWidth: { width: 0.7 } });

Rink, dash and dot

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", lineDash: "dash-dot" });

Field, faint lines

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", lineOpacity: 0.45 });

Goals#

goals styles a hockey net, a basket and a field's posts as it does a soccer goal; goalMarkup draws them with a function of your own.

Rink nets: box

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", goals: "box", exactLines: true });

Rink nets: line

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", goals: "line", exactLines: true });

Rink nets: strip

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", goals: "strip", exactLines: true });

Rink nets: none

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", goals: "none", exactLines: true });

Court baskets: box

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", goals: "box" });

Court baskets: line

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", goals: "line" });

Court baskets: strip

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", goals: "strip" });

Court baskets: none

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", goals: "none" });

Field posts: line

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", goals: "line" });

Field posts: strip

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", goals: "strip" });

Field posts: none

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", goals: "none" });

A function of your own

`goalMarkup` is given where each goal stands and returns SVG in feet.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "nhl",
  goalMarkup: ({ x, y, width, out }) => '<rect x="' + (out < 0 ? x - 4 : x) + '" y="' + (y - width / 2) + '" width="4" height="' + width + '" fill="#1d4f91"/>',
});

Mowing patterns#

stripePattern on a football field and a ballpark, as on a soccer pitch.

Field: wide

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "wide" });

Field: narrow

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "narrow" });

Field: lengthwise

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "lengthwise" });

Field: checks

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "checks" });

Field: diagonal

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "diagonal" });

Field: circles

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", stripePattern: "circles" });

Ballpark: bands

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", stripePattern: "bands" });

Ballpark: lengthwise

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", stripePattern: "lengthwise" });

Ballpark: checks

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", stripePattern: "checks" });

Ballpark: diagonal

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", stripePattern: "diagonal" });

Ballpark: fan

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", stripePattern: "fan" });

Pitch: circles

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", stripePattern: "circles" });

Direction of play#

direction draws an arrow for the end each team attacks, by the sport's rule for the periods.

Rink: home attacks the right

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", direction: { home: "right", away: "left" } });

Rink, second period: the ends have changed

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", direction: { home: "right", away: "left", period: 2 } });

Field, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", orientation: "portrait", direction: { home: "right", away: "left" } });

Pitch, with a label of your own

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", direction: { home: "left", label: "Attacking the south goal" } });

Axes#

axes puts ticks and numbers along the edges, in the drawing's own numbers or any frame of the sport.

Field, in yards

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", axes: { ticks: 10, labels: { x: "yards", y: "yards" } } });

Rink, in the NHL API's numbers

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", axes: { frame: "nhl-api", ticks: { x: 25, y: 10 } } });

Court, in the NBA stats frame

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", axes: { frame: "nba-stats", ticks: 100 } });

Pitch, in Opta's 0 to 100

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", pitchType: "opta", axes: { frame: "opta", ticks: 10 } });

Ballpark, in feet from home plate

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", axes: { ticks: 100 } });

Landmarks#

landmarks: true names the parts of a surface, wide and tall.

NHL rink, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", landmarks: true });

NBA court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nba", landmarks: true });

NFL field, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", landmarks: true });

Soccer pitch, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", landmarks: true });

Baseball field, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "mlb", landmarks: true });

Curling sheet, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "curling", landmarks: true });

Tennis court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tennis", landmarks: true });

Volleyball court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "volleyball", landmarks: true });

Pickleball court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "pickleball", landmarks: true });

Padel court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "padel", landmarks: true });

Squash court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "squash", landmarks: true });

Racquetball court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "racquetball", landmarks: true });

Netball court, labelled

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "netball", landmarks: true });

Rink, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nhl", landmarks: true, orientation: "portrait" });

Field, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "nfl", landmarks: true, orientation: "portrait" });

Pitch, in Japanese

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "soccer", landmarks: true, language: "ja" });

All of it together#

A look, labels, a scale and the arrows, for a lesson.

Court on the chalkboard

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "nba",
  look: "chalkboard",
  landmarks: true,
  direction: { home: "right" },
  axes: { ticks: 10 },
});

Rink as a blueprint

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "nhl",
  look: "blueprint",
  landmarks: true,
  direction: { home: "right", away: "left" },
  axes: { ticks: 20 },
});