The pages are in English; this contents, the search and the buttons are in Japanese.
Gallery: layouts and backgrounds
Small multiples in one SVG, with a title, a subtitle, a key and a credit line, in the size of a social card, a square post or a phone; and the grounds behind a drawing or a grid: seven patterns and a photograph. 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.
Sizes for a card, a post and a phone#
preset fixes the size: card is 1200 by 675, square 1080 by 1080, phone 390 wide in one column and as tall as the drawings need.
A social card
Four surfaces Each drawn to scale from its rulebook. Drawings (4): Rink; Court; Pitch; Ballpark. Drawn with Kyogijo. Four surfaces Each drawn to scale from its rulebook Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Drawn with Kyogijo Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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",
subtitle: "Each drawn to scale from its rulebook",
endnote: "Drawn with Kyogijo",
});
A square post
Four surfaces Each drawn to scale. Drawings (4): Rink; Court; Pitch; Ballpark. Drawn with Kyogijo. Four surfaces Each drawn to scale Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Drawn with Kyogijo Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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: "square",
title: "Four surfaces",
subtitle: "Each drawn to scale",
endnote: "Drawn with Kyogijo",
background: "grid",
});
A phone's width
Four surfaces One column. Drawings (4): Rink; Court; Pitch; Ballpark. Drawn with Kyogijo. Four surfaces One column Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Drawn with Kyogijo The picture is as tall as the drawings need.
Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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: "phone",
title: "Four surfaces",
subtitle: "One column",
endnote: "Drawn with Kyogijo",
});
Columns, gaps and the last row#
columns and gap are yours; with neither, the grid picks the columns that make the drawings largest. The last row is centred.
Two columns
Six parks Drawings (6): fenway-park; wrigley-field; oracle-park; coors-field; yankee-stadium; tokyo-dome. Each park's fence from its published figures. Six parks fenway-park Fenway Park, baseball field Drawn 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. wrigley-field Wrigley Field, baseball field Drawn 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 Wrigley Field. oracle-park Oracle Park, baseball field Drawn 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 Oracle Park. coors-field Coors Field, baseball field Drawn 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 Coors Field. yankee-stadium Yankee Stadium, baseball field Drawn 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 Yankee Stadium. tokyo-dome Tokyo Dome, baseball field Drawn 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 Tokyo Dome. Each park's fence from its published figures Two columns of three rows, as tall as the drawings need.
Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const svg = drawGrid(["fenway-park", "wrigley-field", "oracle-park", "coors-field", "yankee-stadium", "tokyo-dome"].map((park) => ({ drawing: { sport: "mlb", park }, label: park })), {
columns: 2,
width: 800,
title: "Six parks",
endnote: "Each park's fence from its published figures",
});
Three columns, a wide gap
A grid of drawings (6) Drawings (6): fenway-park; wrigley-field; oracle-park; coors-field; yankee-stadium; tokyo-dome. fenway-park Fenway Park, baseball field Drawn 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. wrigley-field Wrigley Field, baseball field Drawn 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 Wrigley Field. oracle-park Oracle Park, baseball field Drawn 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 Oracle Park. coors-field Coors Field, baseball field Drawn 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 Coors Field. yankee-stadium Yankee Stadium, baseball field Drawn 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 Yankee Stadium. tokyo-dome Tokyo Dome, baseball field Drawn 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 Tokyo Dome. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const svg = drawGrid(["fenway-park", "wrigley-field", "oracle-park", "coors-field", "yankee-stadium", "tokyo-dome"].map((park) => ({ drawing: { sport: "mlb", park }, label: park })), { columns: 3, gap: 40, width: 900 });
Five drawings in three columns
A grid of drawings (5) Drawings (5): nhl; nba; soccer; mlb; curling. nhl NHL hockey rink Drawn 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. nba NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. soccer Soccer pitch Drawn 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. mlb Baseball field Drawn as: a baseball field, with a 90-foot infield, the mound, the foul lines and the outfield fence. curling Curling sheet Drawn as: a curling sheet, 45.72 by 4.75 metres, with a house at each end (the 12-, 8- and 4-foot circles round the button), the tee, back, hog and centre lines and the hacks. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const svg = drawGrid(["nhl", "nba", "soccer", "mlb", "curling"].map((sport) => ({ drawing: { sport }, label: sport })), { columns: 3, width: 900 });
A key they share#
legend is a list of { label, color, shape, hollow }, set under the title; the description for a screen reader lists it.
Three marks
Shots on the rink Wide and tall. Drawings (2): NHL hockey rink; NHL hockey rink. Key: Goal; Shot; Block. Shots on the rink Wide and tall Goal Shot Block NHL hockey rink Drawn 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. NHL hockey rink Drawn 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. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const svg = drawGrid([{ sport: "nhl" }, { sport: "nhl", orientation: "portrait" }], {
width: 900,
title: "Shots on the rink",
subtitle: "Wide and tall",
legend: [
{ label: "Goal", color: "#c8102e" },
{ label: "Shot", color: "#1f5fa8", hollow: true },
{ label: "Block", color: "#6b6f72", shape: "x" },
],
});
Charts and scores in a cell#
A cell is the options of drawKyogijo, a drawing's SVG, a chart or { drawing, label }: a chart is drawn by its own draw(), with ids of its own.
Two shot charts and a score
A game in three pictures Drawings (3): First half; Second half; Final. Synthetic shots. A game in three pictures First half NBA shot chart Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Data: Zone chart of 90 shots. Field goals made, % in 5 zones, from 28.6% to 50%. Highest: Left corner 3 (50%), Right corner 3 (33.3%), Mid-range (33.3%). 90 shots. By outcome: Made 30, Missed 60. Key. Made, Missed Key. Zone chart of 90 shots Field goals made, % in 5 zones, from 28.6% to 50%. Highest: Left corner 3 (50%), Right corner 3 (33.3%), Mid-range (33.3%). Above the break 3: 31.8% (22) Left corner 3: 50% (4) Right corner 3: 33.3% (3) Mid-range: 33.3% (54) In the paint (non-RA): 28.6% (7) Restricted area (0) 50% 2/4 33.3% 1/3 33.3% 18/54 31.8% 7/22 28.6% 2/7 Legend: Field goals made, % Field goals made, % 30% 40% 50% 60% 90 shots By outcome: Made 30, Missed 60. Key Made, Missed Key Made Missed Second half NBA shot chart Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Data: Zone chart of 140 shots. Field goals made, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (50%), Mid-range (33.3%), Above the break 3 (32.4%). 140 shots. By outcome: Made 47, Missed 93. Key. Made, Missed Key. Zone chart of 140 shots Field goals made, % in 5 zones, from 25% to 50%. Highest: Left corner 3 (50%), Mid-range (33.3%), Above the break 3 (32.4%). Above the break 3: 32.4% (34) Left corner 3: 50% (8) Right corner 3: 25% (4) Mid-range: 33.3% (87) In the paint (non-RA): 28.6% (7) Restricted area (0) 50% 4/8 33.3% 29/87 32.4% 11/34 28.6% 2/7 25% 1/4 Legend: Field goals made, % Field goals made, % 30% 40% 50% 60% 140 shots By outcome: Made 47, Missed 93. Key Made, Missed Key Made Missed Final Summit Peaks 108, Metro Bolts 112, Final Final. Summit Peaks 108, Metro Bolts 112. Metro Bolts won. Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. SUMMIT PEAKS METRO BOLTS SMT 108 MTB 112 – Synthetic shots Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { nbaShotChart } from "@johnmorrisdotca/kyogijo-stadiums/charts";
import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
const shots = (n) => Array.from({ length: n }, (_, i) => ({ x: ((i * 97) % 480) - 240, y: (i * 61) % 300, made: i % 3 === 0 }));
const svg = drawGrid(
[
{ drawing: nbaShotChart(shots(90), { league: 46, minShots: 2 }), label: "First half" },
{ drawing: nbaShotChart(shots(140), { league: 46, minShots: 2 }), label: "Second half" },
{ drawing: { sport: "nba", away: { name: "Summit Peaks", abbr: "SMT", score: 108, color: "#14233f" }, home: { name: "Metro Bolts", abbr: "MTB", score: 112, color: "#c2410c" }, status: "final" }, label: "Final" },
],
{ columns: 2, width: 1000, title: "A game in three pictures", endnote: "Synthetic shots" },
);
Light, dark and Japanese#
theme forces light or dark on the grid and on every drawing in it; language sets the grid's own words and the language of the drawings that have none of their own.
Dark
Four surfaces Dark. Drawings (4): Rink; Court; Pitch; Ballpark. Four surfaces Dark Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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",
theme: "dark",
title: "Four surfaces",
subtitle: "Dark",
background: { pattern: "felt", color: "#16241f" },
});
In Japanese
4つの競技場 それぞれルールブックどおりの寸法で描いています。図（4枚）：Rink；Court；Pitch；Ballpark。Kyogijoで描画。 4つの競技場 それぞれルールブックどおりの寸法で描いています Rink NHLのアイスホッケーリンク 図の内容：アイスホッケーのリンク。200フィート（約61m）×85フィート（約26m）で角が丸く、レッドライン、ブルーライン、フェイスオフサークル、クリース、ゴールがあります。 Court NBAのバスケットボールコート 図の内容：バスケットボールのコート。94フィート（約28.7m）×50フィート（約15.2m）で、ペイントエリア、スリーポイントライン、フリースローサークル、センターサークルがあります。 Pitch サッカーのピッチ 図の内容：サッカーのピッチ。105×68mで、ハーフウェーライン、センターサークル、両側のペナルティーエリアとゴールエリア、ペナルティーマークとペナルティーアーク、コーナーアーク、ゴールがあります。 Ballpark フェンウェイ・パークのグラウンド 図の内容：野球場。塁間90フィート（約27.4m）の内野、マウンド、ファウルライン、外野フェンスがあります。外野フェンスは、フェンウェイ・パークの公表されている距離をもとに描かれています。 Kyogijoで描画 Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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",
language: "ja",
title: "4つの競技場",
subtitle: "それぞれルールブックどおりの寸法で描いています",
endnote: "Kyogijoで描画",
});
A ground behind a drawing#
background on a drawing lays a pattern (and a colour, and a photograph) on the apron, under the surface. Every pattern is a few shapes in the drawing's own ink, so it follows light and dark.
Ground: felt
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "felt" });
Ground: grass
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "grass" });
Ground: wood
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "wood" });
Ground: ice
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "ice" });
Ground: paper
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "paper" });
Ground: grid
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "grid" });
Ground: dots
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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: "nba", background: "dots" });
A ground behind a grid#
The same option on a grid lays the ground under every drawing and the words; a colour of your own sits under the pattern.
Wood
On the table Drawings (4): Rink; Court; Pitch; Ballpark. On the table Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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" }], {
width: 900,
columns: 2,
background: { pattern: "wood", color: "#e6d3b3" },
title: "On the table",
});
Ice
On the ice Drawings (4): Rink; Court; Pitch; Ballpark. On the ice Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code import { drawGrid } from "@johnmorrisdotca/kyogijo-stadiums/layouts";
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" }], {
width: 900,
columns: 2,
background: { pattern: "ice", color: "#e9f2f8" },
title: "On the ice",
});
A photograph behind the surface#
image is an address or a data: image held to the rules of a team's logo, drawn over the ground's colour and under the pattern at imageOpacity. The picture here is a made-up scene written as an SVG document; pass the address of a real photograph.
A photograph behind a court
NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. 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 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 = drawKyogijo({ sport: "nba", background: { color: "#1d2f27", image: photo, imageOpacity: 0.7, pattern: "dots" } });
A photograph behind a grid
Four surfaces Drawings (4): Rink; Court; Pitch; Ballpark. Four surfaces Rink NHL hockey rink Drawn 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. Court NBA basketball court Drawn as: a basketball court, 94 by 50 feet, with its keys, three-point lines, free-throw circles and the centre circle. Pitch Soccer pitch Drawn 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. Ballpark Fenway Park, baseball field Drawn 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. Open in a page loads the published package from jsDelivr, which serves only released versions.
Show the code 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" });
