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: net, racket and court sports

Twelve court sports from their own rulebooks (tennis, volleyball with beach and sitting volleyball, badminton, pickleball, table tennis, padel, squash, racquetball, sepak takraw, teqball, roundnet and netball), wide and tall, in their named looks, with the free zone and the singles sticks, the board of sets and games with its serving ball, and the zones of each side of the net. The pictures share one stylesheet, which is left out of each one's SVG here; drawKyogijo puts it in every drawing unless style: "none" says not to.

Each court#

sport is tennis, volleyball, badminton, pickleball, tabletennis, padel, squash, racquetball, sepaktakraw, teqball, roundnet or netball; beach volleyball is league: "fivb-beach" and sitting volleyball league: "wpv-sitting". They lie wide unless orientation says tall.

Tennis court (ITF)

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

Indoor volleyball court (FIVB)

18 by 9 metres: the centre line under the net (white, between the net's edges), the attack lines 3 metres from it with the front zone a shade apart, the attack lines' five-dash extensions beyond the side lines, the service zone's two marks behind each end line, and the antennae.

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

Beach volleyball court (FIVB Beach)

The beach court is 16 by 8 metres with four boundary lines and nothing else: no centre line, no attack line and no service marks (Beach Rules 1.3.2). The sand look draws its lines in blue.

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", league: "fivb-beach" });

Badminton court (BWF)

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "badminton" });

Pickleball court (USA Pickleball)

Download SVG Open in a page

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

Show the code

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

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

Table tennis table (ITTF)

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tabletennis" });

Sitting volleyball court (World ParaVolley)

10 by 6 metres, the attack lines 2 metres from the centre line, a 7 metre net 1.15 metres high (1.05 for women): the free zone is 4 metres beside the side lines and 6 behind the end lines for World ParaVolley's competitions.

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", league: "wpv-sitting" });

Padel court (FIP)

20 by 10 metres inside its walls: the service lines 6.95 metres from the net, the central service line running under the net and 20 centimetres past each service line. The end walls and the 4 metre walls at the ends of the sides are drawn solid, the metal fence between them lighter.

Download SVG Open in a page

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

Show the code

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

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

Squash court (World Squash)

9.75 by 6.4 metres, the front wall at the left laid flat beside the court as if hinged on its foot: the tin (480 mm), the service line (1.78 m up) and the front wall line (4.57 m up). On the floor the short line, the half court line and the two service boxes.

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

Squash doubles court

7.62 metres wide; `wsf-doubles-wide` is the international competition width, 8.42 metres, with a tin of 330 mm.

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", league: "wsf-doubles" });

Racquetball court (IRF)

40 by 20 feet, the front wall at the left: the short line at the middle, the service zone in front of it with its service boxes and drive serve lines, and the broken receiving line 5 feet behind it. The IRF recommends red 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: "racquetball" });

Sepak takraw court (ISTAF)

13.4 by 6.1 metres: the centre line under the net, a quarter circle of 0.9 metres at each end of it and a service circle of 0.3 metres on each side.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "sepaktakraw" });

Teqball court (FITEQ)

At least 16 by 12 metres, with the 3 by 1.5 metre table in the middle, the net across it, the halfway line and a service line 3.5 metres from each side of the table.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "teqball" });

Roundnet court (International Roundnet Federation)

A square of 10 metres with no out of bounds, the set in the middle, the no hit zone line (0.9 metres) and the serving line (2.6 metres), with a mark at each of the four service positions. The court is square, so it lies the same tall or 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: "roundnet" });

Netball court (World Netball)

30.5 by 15.25 metres: two transverse lines in thirds, the centre circle, two goal circles of 4.9 metres and a goalpost with its ring at each goal line, inside a court surround of 3.05 metres.

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

Squash court, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "squash", orientation: "portrait" });

Padel court, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "padel", orientation: "portrait" });

Netball court, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "netball", orientation: "portrait" });

Tennis court, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tennis", orientation: "portrait" });

Pickleball court, tall

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "pickleball", orientation: "portrait" });

Tennis court, dark

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tennis", theme: "dark", net: { look: "clay" } });

Named looks#

net.look is the colour of the court and of the ground round it. The lines and sizes are the rulebook's whatever the look.

Tennis court: hard-blue

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", net: { look: "hard-blue" } });

Tennis court: hard-green

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", net: { look: "hard-green" } });

Tennis court: clay

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", net: { look: "clay" } });

Tennis court: grass

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", net: { look: "grass" } });

Volleyball court: wood

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", net: { look: "wood" } });

Volleyball court: blue

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", net: { look: "blue" } });

Volleyball court: sand

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", net: { look: "sand" } });

Badminton court: green

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "badminton", net: { look: "green" } });

Badminton court: blue

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "badminton", net: { look: "blue" } });

Badminton court: wood

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "badminton", net: { look: "wood" } });

Pickleball court: blue-green

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", net: { look: "blue-green" } });

Pickleball court: green

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", net: { look: "green" } });

Pickleball court: red

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", net: { look: "red" } });

Table tennis table: blue

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tabletennis", net: { look: "blue" } });

Table tennis table: green

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "tabletennis", net: { look: "green" } });

Padel court: blue

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", net: { look: "blue" } });

Padel court: green

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", net: { look: "green" } });

Padel court: terracotta

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", net: { look: "terracotta" } });

Squash court: wood

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", net: { look: "wood" } });

Squash court: blue

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", net: { look: "blue" } });

Racquetball court: wood

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", net: { look: "wood" } });

Racquetball court: convertible

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", net: { look: "convertible" } });

Sepak takraw court: blue

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "sepaktakraw", net: { look: "blue" } });

Sepak takraw court: green

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "sepaktakraw", net: { look: "green" } });

Sepak takraw court: wood

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "sepaktakraw", net: { look: "wood" } });

Teqball court: grey

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "teqball", net: { look: "grey" } });

Teqball court: blue

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "teqball", net: { look: "blue" } });

Teqball court: green

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "teqball", net: { look: "green" } });

Roundnet court: grass

Download SVG Open in a page

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

Show the code

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

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

Roundnet court: sand

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "roundnet", net: { look: "sand" } });

Roundnet court: indoor

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "roundnet", net: { look: "indoor" } });

Netball court: wood

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", net: { look: "wood" } });

Netball court: blue

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", net: { look: "blue" } });

Netball court: green

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", net: { look: "green" } });

Free zone, posts and sticks#

net.free is official (the default), least or none; net.sticks draws the tennis singles sticks; detail: "simple" leaves out the small marks.

Volleyball: the FIVB's free zone and attack line extensions

5 metres beside the side lines, 6.5 behind the end lines, posts 1 metre out.

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", net: { free: "official" } });

Volleyball: the least the rules allow

A free zone of 3 metres, posts 0.5 metre out and no extension of the attack 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: "volleyball", net: { free: "least" } });

Tennis: a club's run-back

18 feet behind the baselines and 10 beside the sidelines (Appendix X).

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", net: { free: "least" } });

Tennis: no free zone

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", net: { free: "none" } });

Tennis: singles sticks

A doubles net held up for singles by two sticks 3 feet outside the singles court.

Download SVG Open in a page

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

Show the code

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

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

Badminton: simple

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({ sport: "badminton", detail: "simple" });

The board and the badge#

Each team's score in each set (sets), the points of the game in progress (points) and a tie-break (tiebreaks) in tennis, the sets or games won, and a ball beside the team that is serving. A set or a game is the status: set-3, game-2, tiebreak.

Tennis, in the third set

The first set went to a tie-break, 7-6 (5): the 5 is written small beside the games of the team that lost it.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "tennis",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [6, 6, 2],
    tiebreaks: [5, null, null],
    points: "40",
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [7, 3, 3],
    points: "30",
  },
  status: "set-3",
  competition: "Final",
});

Volleyball, in the fourth set

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "volleyball",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [25, 22, 25, 18],
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [21, 25, 20, 20],
  },
  status: "set-4",
  competition: "Semifinal",
});

Beach volleyball, two sets

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",
  league: "fivb-beach",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [21, 23],
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 0,
    color: "#a8452c",
    sets: [18, 21],
    serving: false,
  },
  status: "final",
});

Badminton, in the third game

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "badminton",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [21, 18, 11],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [17, 21, 9] },
  status: "game-3",
  competition: "Final",
  orientation: "landscape",
});

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

Table tennis, final

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "tabletennis",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 3,
    color: "#1d4f91",
    sets: [11, 9, 11, 7, 11],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 2,
    color: "#a8452c",
    sets: [7, 11, 8, 11, 6],
  },
  status: "final",
  competition: "Final",
});

Sitting volleyball, in the fourth set

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

Padel, in the third set

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "padel",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [6, 6, 2],
    tiebreaks: [5, null, null],
    points: "40",
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [7, 3, 3],
    points: "30",
  },
  status: "set-3",
  competition: "Final",
});

Squash, best of five

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "squash",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 3,
    color: "#1d4f91",
    sets: [11, 9, 11, 7, 11],
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 2,
    color: "#a8452c",
    sets: [7, 11, 8, 11, 6],
  },
  status: "final",
  competition: "Final",
});

Racquetball, best of five

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "racquetball",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 3, color: "#1d4f91", sets: [11, 8, 11, 11] },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [7, 11, 9, 5] },
  status: "final",
  competition: "Final",
});

Sepak takraw, three sets

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "sepaktakraw",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [21, 17, 15],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [18, 21, 12] },
  status: "final",
  competition: "Final",
});

Teqball, three sets

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "teqball",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [12, 9, 12],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [10, 12, 7] },
  status: "final",
  competition: "Final",
});

Roundnet: the board lies below the circles

The set is in the middle of the court, so the board lies on the ground below the serving 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: "roundnet",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 2,
    color: "#1d4f91",
    sets: [21, 18, 21],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [15, 21, 17] },
  status: "final",
  competition: "Final",
});

Netball: the usual score, with the teams in the goal thirds

Netball is scored in goals, so it has the usual score, not a board of sets: the home team is on the left.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "netball",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 52, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 49, color: "#a8452c" },
  status: "final",
  competition: "Final",
});

Badge, tennis

The serving ball is in the corner of the team that is serving.

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "tennis",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [6, 6, 2],
    tiebreaks: [5, null, null],
    points: "40",
    serving: true,
  },
  home: {
    name: "Prairie Ridge Bison",
    abbr: "PRB",
    score: 1,
    color: "#a8452c",
    sets: [7, 3, 3],
    points: "30",
  },
  status: "set-3",
  competition: "Final",
  size: "badge",
});

Compact card, badminton

Download SVG Open in a page

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

Show the code

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

const svg = drawKyogijo({
  sport: "badminton",
  away: {
    name: "Harbour City Gulls",
    abbr: "HCG",
    score: 1,
    color: "#1d4f91",
    sets: [21, 18, 11],
    serving: true,
  },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 1, color: "#a8452c", sets: [17, 21, 9] },
  status: "game-3",
  competition: "Final",
  size: "compact",
});

Each side of the net#

The net-court zones split each side at the court's own line: tennis's service line, volleyball's attack line, badminton's short service line, pickleball's non-volley zone line, padel's and teqball's service lines. Squash and racquetball have the wall-court zones (the front court and the back court, split at the short line), roundnet the roundnet-rings and netball the field-thirds.

Zones: tennis

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 balls = Array.from({ length: 80 }, (_, i) => ({ x: ((i * 53) % 40) - 20, y: ((i * 29) % 16) - 8 }));
const svg = drawKyogijo({ sport: "tennis", layers: [{ kind: "zones", name: "balls", zones: "net-court", from: "tennis", data: balls, labels: true, legend: true }] });

Zones: padel

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 balls = Array.from({ length: 80 }, (_, i) => ({ x: ((i * 53) % 16) - 8, y: ((i * 29) % 8) - 4 }));
const svg = drawKyogijo({ sport: "padel", layers: [{ kind: "zones", name: "balls", zones: "net-court", from: "padel", data: balls, labels: true, legend: true }] });

Zones: squash

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 balls = Array.from({ length: 80 }, (_, i) => ({ x: ((i * 53) % 9) - 4.5, y: ((i * 29) % 6) - 3 }));
const svg = drawKyogijo({ sport: "squash", layers: [{ kind: "zones", name: "balls", zones: "wall-court", from: "squash", data: balls, labels: true, legend: true }] });

Zones: roundnet

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 balls = Array.from({ length: 80 }, (_, i) => ({ x: ((i * 53) % 9) - 4.5, y: ((i * 29) % 9) - 4.5 }));
const svg = drawKyogijo({ sport: "roundnet", layers: [{ kind: "zones", name: "balls", zones: "roundnet-rings", from: "roundnet", data: balls, labels: true, legend: true }] });

Zones: pickleball

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 balls = Array.from({ length: 80 }, (_, i) => ({ x: ((i * 53) % 40) - 20, y: ((i * 29) % 16) - 8 }));
const svg = drawKyogijo({ sport: "pickleball", layers: [{ kind: "zones", name: "balls", zones: "net-court", from: "pickleball", data: balls, labels: true, legend: true }] });