A lane draw

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

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

The picture above was drawn when the docs were built. The script below draws it again with the published package.

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();

This page imports the package from jsDelivr (major version 0), which serves only versions that have been published to npm. A feature added after the last release is not in it: the page then keeps the picture above and says why. The docs were built from version 0.6.1.