cardBackSvgfunction
A back as a whole SVG document, 100 by 140. name is one of CARD_BACKS
(an unknown name draws the classic red); the options recolour it, put words
in its middle, size it and name it.
Drawn into a page, a back takes its colours from the CSS custom properties
--toranpu-back, --toranpu-back-ink and --toranpu-back-paper where they
are set and no colour is given here; as an image, it keeps its own.
Import it
import { cardBackSvg } from "@johnmorrisdotca/toranpu/card-backs";Definition
function cardBackSvg(name?: CardBackName | string, given?: CardBackOptions): stringParameters
| Name | Type | Description |
|---|---|---|
name (optional) | string | The registered card design or card-back name. |
given (optional) | CardBackOptions | Explicit card-back settings to override the defaults. |
Returns
string
A back as a whole SVG document, 100 by 140. name is one of CARD_BACKS (an unknown name draws the classic red); the options recolour it, put words in its middle, size it and name it. Drawn into a page, a back takes its colours from the CSS custom properties --toranpu-back, --toranpu-back-ink and --toranpu-back-paper where they are set and no colour is given here; as an image, it keeps its own.
Examples
import { cardBackSvg } from "@johnmorrisdotca/toranpu/card-backs";
console.log(cardBackSvg("classic-red", { width: 80 }).slice(0, 160));<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" width="80" height="112" aria-hidden="true" style="user-select:none;-webkit-user-select:none"><rectWhat it prints (run when this page was built)