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 · Backgrounds for a bracket

BackgroundSvgOptionstype

What a background is drawn for: its width and height, the theme, colours, angle, intensity and seed.

Import it

import type { BackgroundSvgOptions } from "@johnmorrisdotca/taisen-brackets/backgrounds";

Also exported from: @johnmorrisdotca/taisen-brackets

Definition

type BackgroundSvgOptions = shared.BackgroundSvgOptions;

Members

NameTypeDescription
widthnumber
heightnumber
theme (optional)"light" | "dark" | undefined

dark (the default) or light: which of the preset's two palettes. With your own colors, the ink follows what they are.

colors (optional)readonly string[] | undefined

Your own colours, as hex (#0b1230) or rgb(): the first two make the ground, the third and fourth the glow and the pattern. Fewer than four keep the preset's for the rest.

angle (optional)number | undefined

The angle of the ground's gradient and of the pattern over it, in degrees as CSS has it (180 is top to bottom). The preset's own by default; a playing surface keeps its lines straight.

intensity (optional)number | undefined

How strong the pattern and glow are, 0 to 1. Default 0.6.

seed (optional)number | undefined

Moves the scattered parts (confetti, stars, scratches, contours). Default 1.

id (optional)string | undefined

The prefix of the ids the background writes. Default: a hash of its options. Only letters, digits, _ and - are kept (every other character becomes -), and bg- goes in front of one that does not start with a letter; a safe id is used as written.

Examples

import { backgroundSvg, type BackgroundSvgOptions } from "@johnmorrisdotca/taisen-brackets/backgrounds";

const options: BackgroundSvgOptions = { width: 1200, height: 675, theme: "dark", seed: 3 };
console.log(backgroundSvg("aurora", options).ink.dark);
true

What it prints (run when this page was built)

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