A photograph behind a grid

Four surfacesDrawings (4): Rink; Court; Pitch; Ballpark.Four surfacesRinkNHL hockey rinkDrawn as: an ice hockey rink, 200 by 85 feet with rounded corners, with its red and blue lines, face-off circles, creases and goal nets.CourtNBA basketball courtDrawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle.PitchSoccer pitchDrawn as: a soccer pitch, 105 by 68 metres, with the halfway line, the centre circle, both penalty areas, goal areas, penalty marks and arcs, the corner arcs and the goals.BallparkFenway Park, baseball fieldDrawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. The outfield fence follows the figures published for Fenway Park.

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

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

const photo = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 225'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#274b7a'/><stop offset='.62' stop-color='#f0b36a'/><stop offset='1' stop-color='#3d5a3b'/></linearGradient></defs><rect width='400' height='225' fill='url(#s)'/><path d='M0 170L60 120L120 160L200 100L290 150L350 125L400 160V225H0Z' fill='#1d2f27'/></svg>";
const svg = drawGrid([{ drawing: { sport: "nhl" }, label: "Rink" }, { drawing: { sport: "nba" }, label: "Court" }, { drawing: { sport: "soccer" }, label: "Pitch" }, { drawing: { sport: "mlb", park: "fenway-park" }, label: "Ballpark" }], { preset: "card", title: "Four surfaces", background: { image: photo, imageOpacity: 0.5, color: "#1d2f27" }, theme: "dark" });

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.