The strip behind each baseline takes the colour of the team that defends it (`leftColor` and `rightColor`, or `baselineColor`); the paint is stain, so the boards show through it.
The picture above was drawn when the docs were built. The script below draws it again with the published package.
import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
const logo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" fill="#10294f"/><circle cx="50" cy="50" r="38" fill="none" stroke="#f2f2f2" stroke-width="4"/><path d="M20 62Q35 30 50 50T80 38" fill="none" stroke="#f2c230" stroke-width="7" stroke-linecap="round"/></svg>';
const svg = drawKyogijo({
sport: "nba",
leftColor: "#1d4f91",
rightColor: "#8a2432",
court: {
hardwood: true,
apron: "#14171c",
border: "#13233f",
keyLeft: "#1d4f91",
keyRight: "#8a2432",
centreCircle: "#1d4f91",
centreLogo: logo,
baselineText: ["HARBOUR CITY", "PRAIRIE RIDGE"],
sidelineText: "KYOGIJO LEAGUE",
},
});
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.