Kyogijo Stadiums競技場

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

About the name

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

Gallery: the athletics stadium

The 400 m track of World Athletics' Facilities Manual with its staggers, curved starts, relay zones and hurdles, the steeplechase's water jump, every field event, a close-up of each start and the finish, the covered 200 m track and the data: lane draws, results, a race replay and the marks of throws and jumps. 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.

The stadium#

sport: "athletics": eight lanes of 1.22 m, a grass infield with the soccer pitch inside it, and each field event where the Marking Plan puts it.

The stadium

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

The stadium, tall

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.
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", orientation: "portrait" });

A blue track, nine lanes

Athletics trackDrawn as: an athletics track of 400 metres with 9 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.
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", athletics: { track: "blue", lanes: 9 } });

Grass inside, no pitch

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. Mown grass lies inside the track. Field events marked: High jump, Pole vault, Long jump, Triple jump, Shot put, Discus throw, Hammer throw, Javelin throw.
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", athletics: { infield: "grass" } });

A stadium that has a track

Stade de France, 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.

The pitch is the ground's own size.

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", ground: "stade-de-france" });

A relay final, with a score

Harbour City Gulls 27, Prairie Ridge Bison 24, FinalRelay final, Final. Harbour City Gulls 27, Prairie Ridge Bison 24. Harbour City Gulls won. Drawn 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.HARBOURCITY GULLSPRAIRIERIDGE BISONRelay finalHCG27PRB24–Final
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",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 27, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 24, color: "#a8452c" },
  status: "final",
  competition: "Relay final",
});

Line drawing, for a printer

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. Races marked: 100 m, 100 m hurdles, 110 m hurdles, 200 m, 400 m, 400 m hurdles, 800 m, 1000 m, 1500 m, Mile, 2000 m, 3000 m, 5000 m, 10,000 m, 2000 m steeplechase, 3000 m steeplechase, 4 x 100 m relay, 4 x 400 m relay.

Black lines on white, with no colour on the track.

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", look: "line-drawing", athletics: { races: "all" } });

Night

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.
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", look: "night" });

Staggers, hurdles and relays#

races marks the start lines, the breakline, the exchange zones and the hurdles of the races you name, or of "all".

200 m: the stagger is half of 400 m's

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. Races marked: 200 m.

Lane 8 starts 26.515 m ahead of lane 1 (Table 2.2.1.6a).

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", athletics: { races: ["200m"] } });

400 m: a stagger of 7.037 to 53.030 m

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. Races marked: 400 m.
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", athletics: { races: ["400m"] } });

800 m: the breakline

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. Races marked: 800 m.

The runners keep their lanes to the line across the track at the end of the first bend.

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", athletics: { races: ["800m"] } });

4 x 100 m: the exchange zones

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. Races marked: 4 x 100 m relay.
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", athletics: { races: ["4x100m"] } });

4 x 400 m: zones and breakline

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. Races marked: 4 x 400 m relay.
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", athletics: { races: ["4x400m"] } });

The hurdles: 100 m, 110 m and 400 m

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. Races marked: 100 m hurdles, 110 m hurdles, 400 m hurdles.
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", athletics: { races: ["100m-hurdles", "110m-hurdles", "400m-hurdles"] } });

1500 m: the curved start line

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. Races marked: 1500 m.
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", athletics: { races: ["1500m"] } });

Every race at once

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. Races marked: 100 m, 100 m hurdles, 110 m hurdles, 200 m, 400 m, 400 m hurdles, 800 m, 1000 m, 1500 m, Mile, 2000 m, 3000 m, 5000 m, 10,000 m, 2000 m steeplechase, 3000 m steeplechase, 4 x 100 m relay, 4 x 400 m relay.
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", athletics: { races: "all" } });

A ten-lane straight

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. Races marked: 100 m.
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", athletics: { races: ["100m"], straightLanes: 10 } });

The steeplechase#

waterJump puts the pit inside the bend or outside it; the lap, the hurdles and the start of the 3000 m follow.

Water jump inside

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. Races marked: 3000 m steeplechase.
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", athletics: { races: ["3000m-steeplechase"], waterJump: "inside" } });

Water jump outside

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. Races marked: 3000 m steeplechase.
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", athletics: { races: ["3000m-steeplechase"], waterJump: "outside" } });

The water jump

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. Races marked: 3000 m steeplechase. Shows only the water jump at the left end.
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", range: "water-jump", athletics: { races: ["3000m-steeplechase"] } });

A close-up of each start, and the finish#

range: "start" with athletics.start turns the track so that the athletes run to the right (up the page in portrait), with the lane numbers painted behind the line.

100 m

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. A close-up of the start of the 100 m. Shows only the start.
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", range: "start", athletics: { start: "100m" } });

110 m hurdles

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. A close-up of the start of the 110 m hurdles. Shows only the start.
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", range: "start", athletics: { start: "110m-hurdles" } });

200 m

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. A close-up of the start of the 200 m. Shows only the start.
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", range: "start", athletics: { start: "200m" } });

400 m

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. A close-up of the start of the 400 m. Shows only the start.
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", range: "start", athletics: { start: "400m" } });

800 m

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. A close-up of the start of the 800 m. Shows only the start.
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", range: "start", athletics: { start: "800m" } });

1500 m: the waterfall

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. A close-up of the start of the 1500 m. Shows only the start.

The curved line is an involute of lane 1's circle, so every runner is as far from the finish by the shortest way.

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", range: "start", athletics: { start: "1500m" } });

400 m, tall

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. A close-up of the start of the 400 m. Shows only the start.
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", range: "start", orientation: "portrait", athletics: { start: "400m" } });

A start in ink

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. A close-up of the start of the 400 m. Shows only the start.

The same close-up in `look: "line-drawing"`.

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", range: "start", look: "line-drawing", athletics: { start: "400m" } });

The finish

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. A close-up of the finish line. Shows only the finish line.
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", range: "finish" });

The finish, tall

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. A close-up of the finish line. Shows only the finish line.
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", range: "finish", orientation: "portrait" });

The field events#

events switches each one on or off; layout draws one alone at a large scale.

Two events only

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, Shot put.
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", athletics: { events: ["shot-put", "high-jump"] } });

The track alone

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.
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", athletics: { events: false } });

High jump

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. The High jump, drawn alone at a large scale.
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", athletics: { layout: "high-jump" } });

Pole vault

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. The Pole vault, drawn alone at a large scale.
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", athletics: { layout: "pole-vault" } });

Long jump

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. The Long jump, drawn alone at a large scale.
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", athletics: { layout: "long-jump" } });

Triple jump

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. The Triple jump, drawn alone at a large scale.
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", athletics: { layout: "triple-jump" } });

Shot put

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. The Shot put, drawn alone at a large scale.
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", athletics: { layout: "shot-put" } });

Discus throw

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. The Discus throw, drawn alone at a large scale.

The cage, and the 34.92 degree sector.

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", athletics: { layout: "discus-throw" } });

Hammer throw

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. The Hammer throw, drawn alone at a large scale.
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", athletics: { layout: "hammer-throw" } });

Javelin throw

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. The Javelin throw, drawn alone at a large scale.

The runway, the 8 m arc and the 28.96 degree sector.

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", athletics: { layout: "javelin-throw" } });

The covered track#

league: "world-athletics-short": a 200 m banked track of six lanes with a 60 m straight.

The covered track

World Athletics 200 m standard short trackDrawn as: a covered athletics track of 200 metres with 6 lanes, its banked bends of 17.205 metres radius at the kerb and its straights of 44.983 metres, with the finish line and the lane numbers. Nothing lies inside the track.
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", league: "world-athletics-short" });

The covered 400 m

World Athletics 200 m standard short trackDrawn as: a covered athletics track of 200 metres with 6 lanes, its banked bends of 17.205 metres radius at the kerb and its straights of 44.983 metres, with the finish line and the lane numbers. Nothing lies inside the track. Races marked: 400 m.
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", league: "world-athletics-short", athletics: { races: ["400m"] } });

60 m hurdles

World Athletics 200 m standard short trackDrawn as: a covered athletics track of 200 metres with 6 lanes, its banked bends of 17.205 metres radius at the kerb and its straights of 44.983 metres, with the finish line and the lane numbers. Nothing lies inside the track. Races marked: 60 m hurdles.
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", league: "world-athletics-short", athletics: { races: ["60m-hurdles"] } });

A part of the track#

range crops to a named part.

A bend

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. Shows only the bend at the right end.
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", range: "bend" });

The home straight

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. Shows only the finish straight.
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", range: "home-straight" });

The infield

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. Shows only the infield.
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", range: "infield" });

The data#

@johnmorrisdotca/kyogijo-stadiums/athletics: the lane draw, the results, a replay and the marks of throws and jumps.

A lane draw

Lane draw, 100 mDrawn 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. Races marked: 100 m. A close-up of the start of the 100 m. Shows only the start. Data outside it is not drawn. Data: 6 Flags. 6 Names.6 FlagsUSAGBRITAUSAJAMRSA6 NamesBromellBromell, USAHughesHughes, GBRJacobsJacobs, ITAKerleyKerley, USAThompsonThompson, JAMSimbineSimbine, RSA

Names and flags behind the start line; the caller passes the flags as SVG.

Download SVGOpen in a page

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

Show the code
import { laneDraw } from "@johnmorrisdotca/kyogijo-stadiums/athletics";

const flag = (a, b, c) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="${a}"/><rect x="1" width="1" height="2" fill="${b}"/><rect x="2" width="1" height="2" fill="${c}"/></svg>`;
const field = [
  { lane: 1, name: "Bromell", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 2, name: "Hughes", country: "GBR", flag: flag("#012169", "#fff", "#c8102e") },
  { lane: 3, name: "Jacobs", country: "ITA", flag: flag("#009246", "#fff", "#ce2b37") },
  { lane: 4, name: "Kerley", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 5, name: "Thompson", country: "JAM", flag: flag("#009b3a", "#000", "#fed100") },
  { lane: 6, name: "Simbine", country: "RSA", flag: flag("#007749", "#e03c31", "#001489") },
];
const svg = laneDraw(field, { race: "100m" }).draw();

A lane draw, 400 m

Lane draw, 400 mDrawn 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. Races marked: 400 m. A close-up of the start of the 400 m. Shows only the start. Data outside it is not drawn. Data: 6 Flags. 6 Names.6 FlagsUSAGBRITAUSAJAMRSA6 NamesBromellBromell, USAHughesHughes, GBRJacobsJacobs, ITAKerleyKerley, USAThompsonThompson, JAMSimbineSimbine, RSA

Each athlete stands at the stagger of the lane.

Download SVGOpen in a page

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

Show the code
import { laneDraw } from "@johnmorrisdotca/kyogijo-stadiums/athletics";

const flag = (a, b, c) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="${a}"/><rect x="1" width="1" height="2" fill="${b}"/><rect x="2" width="1" height="2" fill="${c}"/></svg>`;
const field = [
  { lane: 1, name: "Bromell", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 2, name: "Hughes", country: "GBR", flag: flag("#012169", "#fff", "#c8102e") },
  { lane: 3, name: "Jacobs", country: "ITA", flag: flag("#009246", "#fff", "#ce2b37") },
  { lane: 4, name: "Kerley", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 5, name: "Thompson", country: "JAM", flag: flag("#009b3a", "#000", "#fed100") },
  { lane: 6, name: "Simbine", country: "RSA", flag: flag("#007749", "#e03c31", "#001489") },
];
const svg = laneDraw(field, { race: "400m" }).draw();

Results

Results, 100 mDrawn 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. Races marked: 100 m. A close-up of the finish line. Shows only the finish line. Data outside it is not drawn. Data: 6 Splits. Values from 5.6 to 5.65. 6 Places. 6 Places. 6 Names. 6 Reaction times.6 SplitsValues from 5.6 to 5.65.50 m: 5.63 s50 m: 5.62 s50 m: 5.64 s50 m: 5.60 s50 m: 5.61 s50 m: 5.65 s6 PlacesKerley, Gold, 9.80Jacobs, Silver, 9.83Thompson, Bronze, 9.86Bromell, 9.89Hughes, 9.95Simbine, 9.986 Places1234566 NamesKerley 9.80Jacobs 9.83Thompson 9.86Bromell 9.89Hughes 9.95Simbine 9.986 Reaction times0.160Reaction 0.160 s0.150Reaction 0.150 s0.170Reaction 0.170 s0.130Reaction 0.130 s0.140Reaction 0.140 s0.180Reaction 0.180 s

The medals, the times, the reaction times and the splits.

Download SVGOpen in a page

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

Show the code
import { raceResults } from "@johnmorrisdotca/kyogijo-stadiums/athletics";

const flag = (a, b, c) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="${a}"/><rect x="1" width="1" height="2" fill="${b}"/><rect x="2" width="1" height="2" fill="${c}"/></svg>`;
const field = [
  { lane: 1, name: "Bromell", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 2, name: "Hughes", country: "GBR", flag: flag("#012169", "#fff", "#c8102e") },
  { lane: 3, name: "Jacobs", country: "ITA", flag: flag("#009246", "#fff", "#ce2b37") },
  { lane: 4, name: "Kerley", country: "USA", flag: flag("#b22234", "#fff", "#3c3b6e") },
  { lane: 5, name: "Thompson", country: "JAM", flag: flag("#009b3a", "#000", "#fed100") },
  { lane: 6, name: "Simbine", country: "RSA", flag: flag("#007749", "#e03c31", "#001489") },
];
const results = field.map((entry, i) => ({ ...entry, place: [4, 5, 2, 1, 3, 6][i], time: 9.8 + [3, 5, 1, 0, 2, 6][i] * 0.03, reaction: 0.13 + i * 0.01, splits: [{ distance: 50, time: 5.6 + i * 0.01 }] }));
const svg = raceResults(results, { race: "100m" }).draw();

A race replay, the 400 m

Replay of the 400 mDrawn 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. Races marked: 400 m. Data: Replay, 0:49. 8 tracked objects. By team: home 8. 9 events.PlayersBy team: home 8.Runner 1 1Runner 2 2Runner 3 3Runner 4 4Runner 5 5Runner 6 6Runner 7 7Runner 8 8Shirt numbers12345678

Each runner is on the curve of the lane, starting at its stagger; at 20 seconds the field is on the back straight.

Download SVGOpen in a page

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

Show the code
import { raceReplay } from "@johnmorrisdotca/kyogijo-stadiums/athletics";
import { drawFrame } from "@johnmorrisdotca/kyogijo-stadiums/replay";

const runners = Array.from({ length: 8 }, (_, i) => ({ lane: i + 1, name: "Runner " + (i + 1), time: 44.2 + i * 0.25, reaction: 0.14 }));
const replay = raceReplay(runners, { race: "400m" });
const svg = drawFrame(replay.options, replay.timeline, 20, replay.look);

Throws: the best mark

Javelin throw: the attemptsDrawn 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. The Javelin throw, drawn alone at a large scale. Data: 4 Attempts. By outcome: attempt 3, best 1. By team: home 4. Values from 84.2 to 90.7. 1 Best mark.4 AttemptsBy outcome: attempt 3, best 1. By team: home 4. Values from 84.2 to 90.7.A, 84.20 mA, 88.10 mA, 90.70 m, best markA, 86.00 m1 Best mark90.70

A foul is marked where it was thrown; the best valid mark is picked out.

Download SVGOpen in a page

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

Show the code
import { fieldMarks } from "@johnmorrisdotca/kyogijo-stadiums/athletics";

const attempts = [{ athlete: "A", distance: 84.2, across: 2 }, { athlete: "A", distance: 88.1, across: -4 }, { athlete: "A", valid: false }, { athlete: "A", distance: 90.7, across: 6 }, { athlete: "A", distance: 86, across: -1 }];
const svg = fieldMarks("javelin-throw", attempts, { surface: { athletics: { layout: "javelin-throw" } } }).draw();

Jumps in the pit

Long jump: the attemptsDrawn 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. The Long jump, drawn alone at a large scale. Data: 3 Attempts. By outcome: attempt 2, best 1. By team: home 3. Values from 8.1 to 8.46. 3 Best mark.3 AttemptsBy outcome: attempt 2, best 1. By team: home 3. Values from 8.1 to 8.46.B, 8.10 mB, 8.46 m, best markB, 8.28 m3 Best mark8.108.468.28
Download SVGOpen in a page

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

Show the code
import { fieldMarks } from "@johnmorrisdotca/kyogijo-stadiums/athletics";

const jumps = [{ athlete: "B", distance: 8.1 }, { athlete: "B", distance: 8.46, across: 0.3 }, { athlete: "B", distance: 8.28, across: -0.2 }];
const svg = fieldMarks("long-jump", jumps, { surface: { athletics: { layout: "long-jump" } }, labels: true }).draw();