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: swimming, water polo, diving and artistic swimming

The four pools from World Aquatics' Competition Regulations: the swimming pool in 50 and 25 m, the water polo field, the diving well and the artistic swimming area, with the looks of the water and the deck, a side section, the lanes of a made-up race with their flags, results, splits and pace, a frame of a race replay, the split pace chart and a natatorium. 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 pool#

sport is swimming, waterpolo, diving or artisticswimming; pool has the course, the lanes, the boards and the area.

Swimming: the 50 m pool of eight lanes

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211

Ropes green, blue and yellow with red floats within 5 m of the walls, the lane markings and their cross lines, the blocks, the touch panels, the backstroke flags at 5 m and the false start rope at 15 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: "swimming" });

Swimming: ten lanes, numbered 0 to 9

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 10 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.99887766554433221100

Lanes 0 and 9 are 2.4 m wide with spaces of 0.1 m outside them in a permanent pool; `temporary: true` is the 26 m pool.

Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { lanes: 10 } });

Swimming: the 25 m short course

Swimming poolDrawn as: a swimming pool, 25 by 21 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211

Eight lanes of 2.5 m with spaces of 0.5 m make a pool 21 m wide.

Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { course: "short" } });

Swimming: a warm-up pool

Swimming poolDrawn as: a warm-up pool, 25 by 21 metres, with 8 lanes and lane ropes.

The same lanes and ropes, without blocks, panels, flags or the false start rope.

Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { course: "short", kind: "warm-up" } });

Water polo: the field of play

Water polo fieldDrawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas.

25 by 20 m between the goal lines: the ropes red to 2 m, yellow to 6 m and green to the half distance line, the 2, 5 and 6 m lines, the goals, the re-entry areas, the referees' platforms, the table and the substitution areas.

Download SVGOpen in a page

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

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

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

Diving: the 1 and 3 m springboards and the 5, 7.5 and 10 m platforms

Diving wellDrawn as: a diving well, 21 by 25.9 metres, with springboards at 1 and 3 metres and platforms at 5, 7.5 and 10 metres.5 m7.5 m10 m1 m1 m3 m3 m

Each board at the distances of Appendix 2, seen from above, with its plummet; the three lines across the well.

Download SVGOpen in a page

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

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

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

Diving: every platform

Diving wellDrawn as: a diving well, 21 by 31.1 metres, with springboards at 1 and 3 metres and platforms at 1, 3, 5, 7.5 and 10 metres.1 m3 m5 m7.5 m10 m1 m1 m3 m3 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: "diving", pool: { platforms: [1, 3, 5, 7.5, 10] } });

Artistic swimming: the Olympic area

Artistic swimming poolDrawn as: an artistic swimming area, 30 by 20 metres, with the lines on the floor, the judges' platform and the starting platform.

30 by 20 m, the lines along the floor, the judges' platform and the starting platform at centre stage.

Download SVGOpen in a page

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

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

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

Artistic swimming: the least area

Artistic swimming poolDrawn as: an artistic swimming area, 25 by 15 metres, with the lines on the floor, the judges' platform and the starting platform, of which 12 by 12 metres is the deep part.3 m

25 by 15 m with a deep part of 12 by 12 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: "artisticswimming", pool: { area: "minimum" } });

The look of the water and the deck#

pool.look is flat (the default), water (a faint, seeded net of light) or tiled; pool.deck is plain or tiled; pool.section adds a side section with the depth.

The water look, from a seed

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211

The same seed draws the same light; the light is one small pattern, defined once.

Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { look: "water", seed: 3 } });

Tiles on the floor and the deck

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { look: "tiled", deck: "tiled" } });

A side section

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. A side section shows the water 2.5 metres deep, the starting blocks, the backstroke flags 5 metres from each end and the false start rope 15 metres from the starting end.88776655443322111.35 m5 m5 m15 m2.5 m

The depth, the blocks and panels, the flags 5 m from each end, the false start rope at 15 m and the least depth the rules ask of the water near a wall with blocks. The height is exaggerated.

Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { look: "water", section: true } });

Swimming, dark

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", theme: "dark", pool: { look: "water" } });

Water polo, the night look

Water polo fieldDrawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas.
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "waterpolo", look: "night", pool: { look: "water" } });

Swimming, tall

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.8877665544332211
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", orientation: "portrait", pool: { look: "water" } });

Water polo, tall

Water polo fieldDrawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas.
Download SVGOpen in a page

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

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

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

Diving, chalkboard, with its parts named

Diving wellDrawn as: a diving well, 21 by 25.9 metres, with springboards at 1 and 3 metres and platforms at 5, 7.5 and 10 metres. Labelled parts: 3 m springboard, 1 m springboard, 10 m platform, 7.5 m platform, 5 m platform, Line across the well.5 m7.5 m10 m1 m1 m3 m3 m7.5 m platform5 m platform10 m platform3 m springboard1 m springboardLine across the well
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "diving", look: "chalkboard", landmarks: true });

The lanes of a race#

pool.race gives each swimmer a lane, a name, a flag you pass as SVG or an address, and, once the race is swum, the time, the reaction time and the splits. Places come from the times; the first three get a medal.

A start list: the lane, the flag, the name and the entry time

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL), entry time 1:49.17. Lane 7: Pavel Novak (FEN), entry time 1:48.61. Lane 6: Ren Takahashi (DOR), entry time 1:47.55. Lane 5: Mateo Varga (CAL), entry time 1:46.88. Lane 4: Ivo Lindqvist (AUR), entry time 1:46.52. Lane 3: Oskar Dahl (BOR), entry time 1:47.32. Lane 2: Callum Rhodes (EST), entry time 1:48.20. Lane 1: Daniel Okoro (GAR), entry time 1:49.30.8877665544332211Jonas BergHEL1:49.178Pavel NovakFEN1:48.617Ren TakahashiDOR1:47.556Mateo VargaCAL1:46.885Ivo LindqvistAUR1:46.524Oskar DahlBOR1:47.323Callum RhodesEST1:48.202Daniel OkoroGAR1:49.301Men's 200 m freestyle, final (made up)

With no results, the entry times are shown.

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 flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const svg = drawKyogijo({ sport: "swimming", pool: { race: { event: "Men's 200 m freestyle, final (made up)", distance: 200, swimmers: swimmers.map(({ splits, reaction, ...s }) => ({ ...s, seed: splits[3] + 0.4 })) } } });

The results: places, times, reaction times and splits

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL), place 7, time 1:48.77, reaction time 0.72, splits 26.10, 53.55, 1:21.38, 1:48.77. Lane 7: Pavel Novak (FEN), place 6, time 1:48.21, reaction time 0.69, splits 26.01, 53.40, 1:21.02, 1:48.21. Lane 6: Ren Takahashi (DOR), place 4, time 1:47.15, reaction time 0.70, splits 25.80, 53.02, 1:20.40, 1:47.15. Lane 5: Mateo Varga (CAL), place 2, silver medal, time 1:46.48, reaction time 0.67, splits 25.55, 52.60, 1:19.95, 1:46.48. Lane 4: Ivo Lindqvist (AUR), place 1, gold medal, time 1:46.12, reaction time 0.64, splits 25.31, 52.28, 1:19.60, 1:46.12. Lane 3: Oskar Dahl (BOR), place 3, bronze medal, time 1:46.92, reaction time 0.61, splits 25.12, 52.30, 1:19.98, 1:46.92. Lane 2: Callum Rhodes (EST), place 5, time 1:47.80, reaction time 0.66, splits 25.70, 52.95, 1:20.66, 1:47.80. Lane 1: Daniel Okoro (GAR), place 8, time 1:48.90, reaction time 0.74, splits 26.20, 53.71, 1:21.45, 1:48.90.8877665544332211Jonas BergHEL8Pavel NovakFEN7Ren TakahashiDOR6Mateo VargaCAL5Ivo LindqvistAUR4Oskar DahlBOR3Callum RhodesEST2Daniel OkoroGAR171:48.77RT 0.7226.10 53.55 1:21.38 1:48.7761:48.21RT 0.6926.01 53.40 1:21.02 1:48.2141:47.15RT 0.7025.80 53.02 1:20.40 1:47.1521:46.48RT 0.6725.55 52.60 1:19.95 1:46.4811:46.12RT 0.6425.31 52.28 1:19.60 1:46.1231:46.92RT 0.6125.12 52.30 1:19.98 1:46.9251:47.80RT 0.6625.70 52.95 1:20.66 1:47.8081:48.90RT 0.7426.20 53.71 1:21.45 1:48.90Men's 200 m freestyle, final (made up)

Swimmers sit in the order of their lanes; the splits are written under each time.

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 flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const svg = drawKyogijo({ sport: "swimming", pool: { look: "water", race: { event: "Men's 200 m freestyle, final (made up)", distance: 200, swimmers: swimmers } } });

Split pace bars

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL), place 7, time 1:48.77, reaction time 0.72, splits 26.10, 53.55, 1:21.38, 1:48.77. Lane 7: Pavel Novak (FEN), place 6, time 1:48.21, reaction time 0.69, splits 26.01, 53.40, 1:21.02, 1:48.21. Lane 6: Ren Takahashi (DOR), place 4, time 1:47.15, reaction time 0.70, splits 25.80, 53.02, 1:20.40, 1:47.15. Lane 5: Mateo Varga (CAL), place 2, silver medal, time 1:46.48, reaction time 0.67, splits 25.55, 52.60, 1:19.95, 1:46.48. Lane 4: Ivo Lindqvist (AUR), place 1, gold medal, time 1:46.12, reaction time 0.64, splits 25.31, 52.28, 1:19.60, 1:46.12. Lane 3: Oskar Dahl (BOR), place 3, bronze medal, time 1:46.92, reaction time 0.61, splits 25.12, 52.30, 1:19.98, 1:46.92. Lane 2: Callum Rhodes (EST), place 5, time 1:47.80, reaction time 0.66, splits 25.70, 52.95, 1:20.66, 1:47.80. Lane 1: Daniel Okoro (GAR), place 8, time 1:48.90, reaction time 0.74, splits 26.20, 53.71, 1:21.45, 1:48.90. The bars show the pace of each split, from the slowest split of the field to the fastest.26.1027.4527.8327.3926.0127.3927.6227.1925.8027.2227.3826.7525.5527.0527.3526.5325.3126.9727.3226.5225.1227.1827.6826.9425.7027.2527.7127.1426.2027.5127.7427.45Jonas BergHEL8Pavel NovakFEN7Ren TakahashiDOR6Mateo VargaCAL5Ivo LindqvistAUR4Oskar DahlBOR3Callum RhodesEST2Daniel OkoroGAR171:48.77RT 0.7226.10 53.55 1:21.38 1:48.7761:48.21RT 0.6926.01 53.40 1:21.02 1:48.2141:47.15RT 0.7025.80 53.02 1:20.40 1:47.1521:46.48RT 0.6725.55 52.60 1:19.95 1:46.4811:46.12RT 0.6425.31 52.28 1:19.60 1:46.1231:46.92RT 0.6125.12 52.30 1:19.98 1:46.9251:47.80RT 0.6625.70 52.95 1:20.66 1:47.8081:48.90RT 0.7426.20 53.71 1:21.45 1:48.90Men's 200 m freestyle, final (made up)0 m50 m100 m150 m200 m

Each lane is the whole race laid out flat: each split a bar as long as its share of the race, in a colour from the field's slowest pace to its fastest.

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 flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const svg = drawKyogijo({ sport: "swimming", pool: { look: "water", race: { event: "Men's 200 m freestyle, final (made up)", distance: 200, pace: true, swimmers: swimmers } } });

A 100 m race in a short course pool

Swimming poolDrawn as: a swimming pool, 25 by 16 metres, with 6 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 100 m freestyle, short course (made up). Lane 6: Ren Takahashi, place 4, time 48.66, splits 11.75, 24.10, 36.45, 48.66. Lane 5: Mateo Varga, place 2, silver medal, time 48.21, splits 11.62, 23.90, 36.10, 48.21. Lane 4: Ivo Lindqvist, place 1, gold medal, time 47.90, splits 11.50, 23.74, 35.80, 47.90. Lane 3: Oskar Dahl, place 3, bronze medal, time 48.40, splits 11.30, 23.65, 36.00, 48.40.665544332211Ren Takahashi6Mateo Varga5Ivo Lindqvist4Oskar Dahl3448.6611.75 24.10 36.45 48.66248.2111.62 23.90 36.10 48.21147.9011.50 23.74 35.80 47.90348.4011.30 23.65 36.00 48.40Men's 100 m freestyle, short course (made up)

A split every 25 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 swimmers = [[4, "Ivo Lindqvist", [11.5, 23.74, 35.8, 47.9]], [5, "Mateo Varga", [11.62, 23.9, 36.1, 48.21]], [3, "Oskar Dahl", [11.3, 23.65, 36.0, 48.4]], [6, "Ren Takahashi", [11.75, 24.1, 36.45, 48.66]]].map(([lane, name, splits]) => ({ lane, name, splits }));
const svg = drawKyogijo({ sport: "swimming", pool: { course: "short", lanes: 6, look: "water", race: { event: "Men's 100 m freestyle, short course (made up)", swimmers } } });

A race, tall

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL), place 7, time 1:48.77, reaction time 0.72, splits 26.10, 53.55, 1:21.38, 1:48.77. Lane 7: Pavel Novak (FEN), place 6, time 1:48.21, reaction time 0.69, splits 26.01, 53.40, 1:21.02, 1:48.21. Lane 6: Ren Takahashi (DOR), place 4, time 1:47.15, reaction time 0.70, splits 25.80, 53.02, 1:20.40, 1:47.15. Lane 5: Mateo Varga (CAL), place 2, silver medal, time 1:46.48, reaction time 0.67, splits 25.55, 52.60, 1:19.95, 1:46.48. Lane 4: Ivo Lindqvist (AUR), place 1, gold medal, time 1:46.12, reaction time 0.64, splits 25.31, 52.28, 1:19.60, 1:46.12. Lane 3: Oskar Dahl (BOR), place 3, bronze medal, time 1:46.92, reaction time 0.61, splits 25.12, 52.30, 1:19.98, 1:46.92. Lane 2: Callum Rhodes (EST), place 5, time 1:47.80, reaction time 0.66, splits 25.70, 52.95, 1:20.66, 1:47.80. Lane 1: Daniel Okoro (GAR), place 8, time 1:48.90, reaction time 0.74, splits 26.20, 53.71, 1:21.45, 1:48.90.8877665544332211Jonas BergHEL8Pavel NovakFEN7Ren TakahashiDOR6Mateo VargaCAL5Ivo LindqvistAUR4Oskar DahlBOR3Callum RhodesEST2Daniel OkoroGAR171:48.77RT 0.7226.10 53.55 1:21.38 1:48.7761:48.21RT 0.6926.01 53.40 1:21.02 1:48.2141:47.15RT 0.7025.80 53.02 1:20.40 1:47.1521:46.48RT 0.6725.55 52.60 1:19.95 1:46.4811:46.12RT 0.6425.31 52.28 1:19.60 1:46.1231:46.92RT 0.6125.12 52.30 1:19.98 1:46.9251:47.80RT 0.6625.70 52.95 1:20.66 1:47.8081:48.90RT 0.7426.20 53.71 1:21.45 1:48.90Men's 200 m freestyle, final (made up)

The names and times lie along the lanes; the numbers in the discs stay upright.

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 flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const svg = drawKyogijo({ sport: "swimming", orientation: "portrait", pool: { race: { event: "Men's 200 m freestyle, final (made up)", distance: 200, swimmers: swimmers } } });

A disqualification, a swimmer who did not start

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 50 m freestyle, final (made up). Lane 6: D. Swimmer, did not start. Lane 5: B. Swimmer, place 2, silver medal, time 49.40, reaction time 0.66. Lane 4: A. Swimmer, place 1, gold medal, time 49.12, reaction time 0.62. Lane 3: C. Swimmer, disqualified.8877665544332211D. Swimmer6B. Swimmer5A. Swimmer4C. Swimmer3DNS249.40RT 0.66149.12RT 0.62DQMen's 50 m freestyle, final (made up)
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 swimmers = [{ lane: 4, name: "A. Swimmer", time: 49.12, reaction: 0.62 }, { lane: 5, name: "B. Swimmer", time: 49.4, reaction: 0.66 }, { lane: 3, name: "C. Swimmer", status: "dq", time: 48.98 }, { lane: 6, name: "D. Swimmer", status: "dns" }];
const svg = drawKyogijo({ sport: "swimming", pool: { race: { event: "Men's 50 m freestyle, final (made up)", swimmers } } });

Charts and a replay#

splitsChart from /charts is the pace bars with a title, a summary and a table; raceTimeline from /replay plays the splits as swimmers going down their lanes and back.

The split pace chart

Split pace, Men's 200 m freestyle, final (made up)Drawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL), place 7, time 1:48.77, reaction time 0.72, splits 26.10, 53.55, 1:21.38, 1:48.77. Lane 7: Pavel Novak (FEN), place 6, time 1:48.21, reaction time 0.69, splits 26.01, 53.40, 1:21.02, 1:48.21. Lane 6: Ren Takahashi (DOR), place 4, time 1:47.15, reaction time 0.70, splits 25.80, 53.02, 1:20.40, 1:47.15. Lane 5: Mateo Varga (CAL), place 2, silver medal, time 1:46.48, reaction time 0.67, splits 25.55, 52.60, 1:19.95, 1:46.48. Lane 4: Ivo Lindqvist (AUR), place 1, gold medal, time 1:46.12, reaction time 0.64, splits 25.31, 52.28, 1:19.60, 1:46.12. Lane 3: Oskar Dahl (BOR), place 3, bronze medal, time 1:46.92, reaction time 0.61, splits 25.12, 52.30, 1:19.98, 1:46.92. Lane 2: Callum Rhodes (EST), place 5, time 1:47.80, reaction time 0.66, splits 25.70, 52.95, 1:20.66, 1:47.80. Lane 1: Daniel Okoro (GAR), place 8, time 1:48.90, reaction time 0.74, splits 26.20, 53.71, 1:21.45, 1:48.90. The bars show the pace of each split, from the slowest split of the field to the fastest.26.1027.4527.8327.3926.0127.3927.6227.1925.8027.2227.3826.7525.5527.0527.3526.5325.3126.9727.3226.5225.1227.1827.6826.9425.7027.2527.7127.1426.2027.5127.7427.45Jonas BergHEL8Pavel NovakFEN7Ren TakahashiDOR6Mateo VargaCAL5Ivo LindqvistAUR4Oskar DahlBOR3Callum RhodesEST2Daniel OkoroGAR171:48.77RT 0.7226.10 53.55 1:21.38 1:48.7761:48.21RT 0.6926.01 53.40 1:21.02 1:48.2141:47.15RT 0.7025.80 53.02 1:20.40 1:47.1521:46.48RT 0.6725.55 52.60 1:19.95 1:46.4811:46.12RT 0.6425.31 52.28 1:19.60 1:46.1231:46.92RT 0.6125.12 52.30 1:19.98 1:46.9251:47.80RT 0.6625.70 52.95 1:20.66 1:47.8081:48.90RT 0.7426.20 53.71 1:21.45 1:48.90Men's 200 m freestyle, final (made up)0 m50 m100 m150 m200 m

The chart also gives `chart.totals` (the fastest split of the field) and `chart.table()`.

Download SVGOpen in a page

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

Show the code
import { splitsChart } from "@johnmorrisdotca/kyogijo-stadiums/charts";

const flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const chart = splitsChart({ event: "Men's 200 m freestyle, final (made up)", distance: 200, swimmers }, { pool: { look: "water" } });
const svg = chart.draw();

A frame of the race replay, 75 seconds after the signal

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Men's 200 m freestyle, final (made up). Lane 8: Jonas Berg (HEL). Lane 7: Pavel Novak (FEN). Lane 6: Ren Takahashi (DOR). Lane 5: Mateo Varga (CAL). Lane 4: Ivo Lindqvist (AUR). Lane 3: Oskar Dahl (BOR). Lane 2: Callum Rhodes (EST). Lane 1: Daniel Okoro (GAR). Data: Replay, 1:53. 8 tracked objects. By team: home 8. 33 events.8877665544332211Jonas BergHEL8Pavel NovakFEN7Ren TakahashiDOR6Mateo VargaCAL5Ivo LindqvistAUR4Oskar DahlBOR3Callum RhodesEST2Daniel OkoroGAR1Men's 200 m freestyle, final (made up)Trail of the last 3 secondsBy team: home 8.PlayersBy team: home 8.Jonas Berg 8Pavel Novak 7Ren Takahashi 6Mateo Varga 5Ivo Lindqvist 4Oskar Dahl 3Callum Rhodes 2Daniel Okoro 1Shirt numbers87654321

The marks are the swimmers, numbered by lane, moving from the splits; the clock and the controls are the replay's own.

Download SVGOpen in a page

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

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

const flag = (a, b) => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="' + a + '"/><rect y="7" width="30" height="6" fill="' + b + '"/></svg>';
const swimmers = [
  [4, "Ivo Lindqvist", "AUR", "#0f7a7a", "#f4f0e4", 0.64, [25.31, 52.28, 79.6, 106.12]],
  [5, "Mateo Varga", "CAL", "#6b2d5c", "#f2c230", 0.67, [25.55, 52.6, 79.95, 106.48]],
  [3, "Oskar Dahl", "BOR", "#8a2d4b", "#e8e2cf", 0.61, [25.12, 52.3, 79.98, 106.92]],
  [6, "Ren Takahashi", "DOR", "#c2410c", "#14233f", 0.7, [25.8, 53.02, 80.4, 107.15]],
  [2, "Callum Rhodes", "EST", "#3a2d6b", "#e8e2cf", 0.66, [25.7, 52.95, 80.66, 107.8]],
  [7, "Pavel Novak", "FEN", "#1f6b3c", "#f2c230", 0.69, [26.01, 53.4, 81.02, 108.21]],
  [8, "Jonas Berg", "HEL", "#7a2a8c", "#f2c230", 0.72, [26.1, 53.55, 81.38, 108.77]],
  [1, "Daniel Okoro", "GAR", "#14233f", "#f2a900", 0.74, [26.2, 53.71, 81.45, 108.9]],
].map(([lane, name, abbr, a, b, reaction, splits]) => ({ lane, name, abbr, flag: flag(a, b), reaction, splits }));
const pool = { look: "water", race: { event: "Men's 200 m freestyle, final (made up)", distance: 200, swimmers, show: { results: false } } };
const timeline = raceTimeline({ pool });
const svg = drawFrame({ sport: "swimming", pool }, timeline, 75, { trail: 3, trailOf: ["home"] });

Heat by lane

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Data: Zone chart of 240 points. Count in 8 zones, from 25 to 43. Highest: Lane 1 (43), Lane 8 (42), Lane 5 (29).8877665544332211Zone chart of 240 pointsCount in 8 zones, from 25 to 43. Highest: Lane 1 (43), Lane 8 (42), Lane 5 (29).Lane 8: 42 (42)Lane 7: 26 (26)Lane 6: 25 (25)Lane 5: 29 (29)Lane 4: 25 (25)Lane 3: 25 (25)Lane 2: 25 (25)Lane 1: 43 (43)Lane 143Lane 842Lane 529Lane 726Lane 625Lane 425Lane 325Lane 225Legend: CountCount25303540

The zone set `pool-lanes` counts marks into the lanes.

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 data = Array.from({ length: 240 }, (_, i) => ({ x: 20 + ((i * 37) % 120), y: 4 + ((i * 17) % 76) }));
const svg = drawKyogijo({ sport: "swimming", layers: [{ kind: "zones", zones: "pool-lanes", data, labels: { show: ["name", "value"] }, legend: true }] });

A natatorium#

pool.venue sets several pools in one hall, to scale, at least 8 m apart (10 m by default), with the deck round them drawn once.

The competition pool, the diving well and a warm-up pool

Swimming poolDrawn as: A hall with 3 pools to scale: Competition pool, Diving well and Warm-up pool.88776655443322115 m7.5 m10 m1 m1 m3 m3 mCompetition poolDiving wellWarm-up poolSpectators
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { venue: "natatorium" } });

The same hall in water and tiles

Swimming poolDrawn as: A hall with 3 pools to scale: Competition pool, Diving well and Warm-up pool.88776655443322115 m7.5 m10 m1 m1 m3 m3 mCompetition poolDiving wellWarm-up poolSpectators
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", pool: { venue: "natatorium", look: "water", deck: "tiled" } });

A hall of your own: a water polo pool and an artistic swimming area

Swimming poolDrawn as: A hall with 3 pools to scale: Water polo pool, Artistic swimming pool and Warm-up pool.Water polo poolArtistic swimming poolWarm-up poolSpectators
Download SVGOpen in a page

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

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

const svg = drawKyogijo({
  sport: "swimming",
  pool: {
    venue: {
      pools: [
        { sport: "waterpolo" },
        { sport: "artisticswimming" },
        { sport: "swimming", course: "short", lanes: 6, kind: "warm-up" },
      ],
      apart: 12,
    },
  },
});

A score, a part of the pool and its parts named#

A dual meet's points, a water polo match, a crop to the first 15 m of a pool or the goal area, and the parts of the pool named.

A dual meet

Harbour City Gulls 146, Prairie Ridge Bison 154, FinalDual meet, Final. Harbour City Gulls 146, Prairie Ridge Bison 154. Prairie Ridge Bison won. Drawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope.HARBOUR CITY GULLSPRAIRIE RIDGE BISON8877665544332211Dual meetHCG146PRB154–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: "swimming",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 146, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 154, color: "#a8452c" },
  status: "final",
  competition: "Dual meet",
});

A water polo match

Prairie Ridge Bison 11, Harbour City Gulls 9, FinalQuarter-final, Final. Prairie Ridge Bison 11, Harbour City Gulls 9. Prairie Ridge Bison won. Drawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas.PRAIRIE RIDGE BISONHARBOUR CITY GULLSQuarter-finalPRB11HCG9–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: "waterpolo",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 9, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 11, color: "#a8452c" },
  status: "final",
  competition: "Quarter-final",
});

Diving, as a strip

Harbour City Gulls 146, Prairie Ridge Bison 154, FinalDual meet, Final. Harbour City Gulls 146, Prairie Ridge Bison 154. Prairie Ridge Bison won. Drawn as: a diving well, 21 by 25.9 metres, with springboards at 1 and 3 metres and platforms at 5, 7.5 and 10 metres.HCG146PRB154Final
Download SVGOpen in a page

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

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

const svg = drawKyogijo({
  sport: "diving",
  away: { name: "Harbour City Gulls", abbr: "HCG", score: 146, color: "#1d4f91" },
  home: { name: "Prairie Ridge Bison", abbr: "PRB", score: 154, color: "#a8452c" },
  status: "final",
  competition: "Dual meet",
  size: "badge",
});

Swimming: the end of the pool to the 15 m mark

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Shows only the end of the pool, up to the 15 m mark at the left end.8877665544332211
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "swimming", range: "pool-end" });

Water polo: the goal area

Water polo fieldDrawn as: a water polo field of play, 25 by 20 metres, with the goal lines, the 2, 5 and 6 metre marks, the half distance line, the goals and the re-entry areas. Shows only the goal area 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: "waterpolo", range: "goal-area" });

Diving: the springboards

Diving wellDrawn as: a diving well, 21 by 25.9 metres, with springboards at 1 and 3 metres and platforms at 5, 7.5 and 10 metres. Shows only the springboards at the left end.5 m7.5 m10 m1 m1 m3 m3 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: "diving", range: "springboards" });

Artistic swimming: centre stage

Artistic swimming poolDrawn as: an artistic swimming area, 30 by 20 metres, with the lines on the floor, the judges' platform and the starting platform. Shows only the centre of the pool, the middle third.
Download SVGOpen in a page

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

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

const svg = drawKyogijo({ sport: "artisticswimming", range: "centre-stage" });

Swimming, with its parts named

Swimming poolDrawn as: a swimming pool, 50 by 25 metres, with 8 lanes, lane ropes, the lane markings on the floor, starting blocks, touch panels, backstroke flags and a false start rope. Labelled parts: Lane rope, Lane marking on the floor, Cross line at the end of the lane marking, 15 m mark, Touch panel, Starting block, Backstroke flags, False start rope, Gutter.8877665544332211Cross line at the end of the lane marking15 m markLane ropeStarting blockTouch panelBackstroke flagsFalse start ropeLane marking on the floorGutter
Download SVGOpen in a page

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

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

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