Skip to the content

Taisen Brackets対戦

Knockout brackets as SVG, from a list of ties.

Taisen (対戦, たいせん) is Japanese for a matchup: two sides facing each other. About the name

Contents

Reference · Where every tie sits

BackgroundOptionstype

A preset, tuned: your own colours (hex or rgb(), the first two the ground), the gradient's angle, how strong the pattern is (0 to 1, default 0.6), a seed for the scattered parts, and which of its two variants.

Import it

import type { BackgroundOptions } from "@johnmorrisdotca/taisen-brackets/layout";

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

interface BackgroundOptions {
    preset?: BackgroundPresetName;
    colors?: readonly string[];
    angle?: number;
    intensity?: number;
    seed?: number;
    theme?: "light" | "dark";
}

Members

NameTypeDescription
preset (optional)"midnight" | "crimson" | "royal" | "emerald" | "pitch" | "ice" | "hardwood" | "infield" | "turf" | "ball-panels" | "swirl" | "waves" | "glow" | "floodlights" | "confetti" | "carbon" | "aurora" | "sunburst" | "chevrons" | "halftone" | "argyle" | "contour" | "stardust" | "mesh" | "spotlight" | undefined

Default midnight.

colors (optional)readonly string[] | undefined
angle (optional)number | undefined
intensity (optional)number | undefined
seed (optional)number | undefined
theme (optional)"light" | "dark" | undefined

light or dark: the variant to draw. By default the one of the drawing's look.

Examples

import { drawBracket, type BackgroundOptions } from "@johnmorrisdotca/taisen-brackets";

const background: BackgroundOptions = { preset: "aurora", intensity: 0.6, seed: 7 };
console.log(drawBracket([{ sides: ["Aurora", "Harbour"], score: [2, 1] }, { sides: ["Cascade", "Delta"], score: [0, 1] }, { sides: ["Aurora", "Delta"], score: [3, 1] }], { background }).startsWith("<svg"));
true

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/taisen-brackets 0.20.0.