eric/hnefatafl
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Board artwork: one component draws the game, the hall's still, and the share card, with gradients on the pieces, plank joins and inlaid corners on the oak, and the stone as it was

Browse Source 
npm run art renders the standalone SVGs and the 1200 by 630 card through
Sharp, a development dependency only.
This commit is contained in:
Eric Wagoner committed 2026-09-23 19:32:15 -04:00
1 parent 145667ea0d
commit a213a238d3
12 files changed
+1089 -382
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/board-copenhagen.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="artwork svelte-14xsz9c calm" data-set="copenhagen" viewBox="0 0 452 452" role="img" aria-label="Copenhagen board in its opening position"><style>.artwork.svelte-14xsz9c {
/* Copenhagen: a crafted oak board, polished counters and brass inlay. */--surface-light: #bd935c;--surface-dark: #79502d;--rim-light: #e0bf84;--attacker-light: #63564a;--defender-light: #fff4d8;--king-light: #ffe4a0;--wood: #a77945;--wood-line: rgba(30, 16, 6, 0.55);--coord: #302216;--square: rgba(255, 240, 210, 0.08);--square-edge: rgba(255, 250, 235, 0.11);--throne: rgba(240, 165, 58, 0.35);--corner: rgba(109, 52, 29, 0.22);--attacker: #2a2320;--attacker-rim: #211a15;--defender: #ece4d0;--defender-rim: #b9ab8b;--king: #f0d58a;--king-rim: #a67c1a;--crown: #6b4a0f;}
/* Tablut: an excavated-object aesthetic, with limestone and aged counters. */.artwork[data-set='tablut'].svelte-14xsz9c {--surface-light: #aaa18b;--surface-dark: #797564;--rim-light: #c4b99e;--attacker-light: #534f43;--defender-light: #ded0ae;--king-light: #e5cc92;--wood: #8a8578;--wood-line: rgba(36, 32, 27, 0.45);--coord: #37362c;--square: rgba(255, 250, 235, 0.05);--square-edge: rgba(255, 250, 235, 0.09);--throne: rgba(120, 100, 70, 0.4);--corner: transparent;--attacker: #3d3530;--attacker-rim: #29281f;--defender: #cfc4ad;--defender-rim: #8c8069;--king: #c9b27a;--king-rim: #7d6636;--crown: #5a4a2a;}.artwork.svelte-14xsz9c {width:100%;height:auto;display:block;}.wood.svelte-14xsz9c {stroke:#79502d;stroke-width:1.4;}.stain.svelte-14xsz9c {fill:#fff;pointer-events:none;}.chip.svelte-14xsz9c {fill:rgba(28, 24, 20, 0.42);stroke:rgba(230, 222, 205, 0.18);stroke-width:0.6;pointer-events:none;}.crack.svelte-14xsz9c {fill:none;stroke:rgba(43, 39, 29, 0.48);stroke-width:0.5;stroke-linecap:round;pointer-events:none;}.coord.svelte-14xsz9c {fill:#302216;font-family:Georgia, serif;font-size:9px;font-weight:600;pointer-events:none;}.square.svelte-14xsz9c {fill:rgba(255, 240, 210, 0.08);stroke:rgba(30, 16, 6, 0.55);stroke-width:0.65;cursor:default;transition:fill 0.3s ease;}.square.edge.svelte-14xsz9c {fill:rgba(255, 250, 235, 0.11);}.square.throne.svelte-14xsz9c {fill:rgba(240, 165, 58, 0.35);}.square.corner.svelte-14xsz9c {fill:rgba(109, 52, 29, 0.22);}.square.last.svelte-14xsz9c {fill:rgba(140, 200, 224, 0.28);}.square.target.svelte-14xsz9c {cursor:pointer;}.square.fallen.svelte-14xsz9c {fill:rgba(224, 101, 92, 0.45);}.square.svelte-14xsz9c:focus-visible {outline:none;stroke:#9ccbdd;stroke-width:2.5;}.hint.svelte-14xsz9c {fill:#9ccbdd;opacity:0.85;}.piece.svelte-14xsz9c {transition:transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1),
opacity 0.3s ease;}.piece.dying.svelte-14xsz9c {opacity:0;}.board-rim.svelte-14xsz9c {fill:none;stroke:#e0bf84;stroke-width:0.7;opacity:0.65;pointer-events:none;}.join.svelte-14xsz9c {fill:none;stroke:#50351f;stroke-width:0.6;opacity:0.18;pointer-events:none;}.surface-wear.svelte-14xsz9c {pointer-events:none;}.crack-light.svelte-14xsz9c {fill:none;stroke:#e1d6bd;stroke-width:0.55;opacity:0.45;}.inlay.svelte-14xsz9c {fill:none;stroke:#e0bf84;stroke-width:0.8;opacity:0.75;pointer-events:none;}.artwork[data-set='tablut'].svelte-14xsz9c .inlay.svelte-14xsz9c {stroke:#494638;opacity:0.45;}.piece.svelte-14xsz9c {--piece-rim: #b9ab8b;}.piece.attacker.svelte-14xsz9c {--piece-rim: #211a15;}.piece.king.svelte-14xsz9c {--piece-rim: #a67c1a;}.piece.svelte-14xsz9c .shadow.svelte-14xsz9c {fill:#16130e;opacity:0.28;}.piece.svelte-14xsz9c .base.svelte-14xsz9c {fill:#b9ab8b;}.piece.svelte-14xsz9c .body.svelte-14xsz9c {stroke:#b9ab8b;stroke-width:0.65;}.bevel-light.svelte-14xsz9c {fill:none;stroke:#fff1cc;stroke-width:0.9;opacity:0.48;stroke-linecap:round;}.bevel-dark.svelte-14xsz9c {fill:none;stroke:#211d16;stroke-width:0.8;opacity:0.3;stroke-linecap:round;}.turned.svelte-14xsz9c {fill:none;stroke:#b9ab8b;stroke-width:0.45;opacity:0.35;}.counter-wear.svelte-14xsz9c {fill:none;stroke:#534b37;stroke-width:0.5;opacity:0.3;stroke-linecap:round;}.attacker.svelte-14xsz9c .counter-wear.svelte-14xsz9c {stroke:#d6c6a3;opacity:0.23;}.artwork[data-set='tablut'].svelte-14xsz9c .bevel-light.svelte-14xsz9c {opacity:0.25;stroke-width:1.1;}.artwork[data-set='tablut'].svelte-14xsz9c .turned.svelte-14xsz9c {display:none;}.pit.svelte-14xsz9c {fill:#544b38;opacity:0.3;}.attacker.svelte-14xsz9c .pit.svelte-14xsz9c {fill:#d6c6a3;opacity:0.2;}.piece.svelte-14xsz9c .crown.svelte-14xsz9c {fill:#6b4a0f;stroke:#6b4a0f;stroke-width:0.7;stroke-linejoin:round;}.piece.svelte-14xsz9c .crown-gleam.svelte-14xsz9c {fill:#f8e5b2;stroke:#f8e5b2;stroke-width:0.9;opacity:0.7;}.piece.selected.svelte-14xsz9c .body.svelte-14xsz9c {stroke:#9ccbdd;stroke-width:2.5;}.calm.svelte-14xsz9c .piece.svelte-14xsz9c, .calm.svelte-14xsz9c .square.svelte-14xsz9c {transition:none;}.piece.attacker .base{fill:#211a15}.piece.attacker .body,.piece.attacker .turned{stroke:#211a15}.piece.defender .base{fill:#b9ab8b}.piece.defender .body,.piece.defender .turned{stroke:#b9ab8b}.piece.king .base{fill:#a67c1a}.piece.king .body,.piece.king .turned{stroke:#a67c1a}</style><defs><linearGradient id="s1-surface" x2="0.85" y2="1"><stop stop-color="#bd935c"></stop><stop offset="0.48" stop-color="#a77945"></stop><stop offset="1" stop-color="#79502d"></stop></linearGradient><filter id="s1-grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.025 0.5" numOctaves="3" seed="7" result="noise"></feTurbulence><feColorMatrix in="noise" type="saturate" values="0"></feColorMatrix><feComponentTransfer result="soft"><feFuncA type="linear" slope="0.13"></feFuncA></feComponentTransfer><feBlend in="SourceGraphic" in2="soft" mode="multiply"></feBlend></filter><filter id="s1-worn" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="2" seed="3" result="warp"></feTurbulence><feDisplacementMap in="SourceGraphic" in2="warp" scale="1.15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter><filter id="s1-mottle" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="3" seed="11"></feTurbulence><feColorMatrix type="matrix" values="0 0 0 0 0.20 0 0 0 0 0.17 0 0 0 0 0.12 0.28 0 0 0 0"></feColorMatrix><feComposite in2="SourceGraphic" operator="in"></feComposite></filter><radialGradient id="s1-attacker" cx="32%" cy="24%" r="80%"><stop stop-color="#63564a"></stop><stop offset="0.65" stop-color="#2a2320"></stop><stop offset="1" stop-color="#211a15"></stop></radialGradient><radialGradient id="s1-defender" cx="32%" cy="24%" r="80%"><stop stop-color="#fff4d8"></stop><stop offset="0.65" stop-color="#ece4d0"></stop><stop offset="1" stop-color="#b9ab8b"></stop></radialGradient><radialGradient id="s1-king" cx="32%" cy="24%" r="80%"><stop stop-color="#ffe4a0"></stop><stop offset="0.65" stop-color="#f0d58a"></stop><stop offset="1" stop-color="#a67c1a"></stop></radialGradient></defs><rect class="wood svelte-14xsz9c" x="0.7" y="0.7" width="450.6" height="450.6" rx="6" fill="url(#s1-surface)" filter="url(#s1-grain)"></rect><rect class="board-rim svelte-14xsz9c" x="2" y="2" width="448" height="448" rx="5"></rect><path class="join svelte-14xsz9c" d="M102.8 3 v446"></path><path class="join svelte-14xsz9c" d="M230.4 3 v446"></path><path class="join svelte-14xsz9c" d="M353.6 3 v446"></path><g class="surface-wear svelte-14xsz9c" aria-hidden="true"></g><g><rect class="square svelte-14xsz9c corner" data-i="0" x="6" y="6" width="40" height="40" aria-label="a11"></rect><rect class="square svelte-14xsz9c" data-i="1" x="46" y="6" width="40" height="40" aria-label="b11"></recLine truncated
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

static/board-tablut.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="artwork svelte-14xsz9c calm" data-set="tablut" viewBox="0 0 372 372" role="img" aria-label="Tablut board in its opening position"><style>.artwork.svelte-14xsz9c {
/* Copenhagen: a crafted oak board, polished counters and brass inlay. */--surface-light: #bd935c;--surface-dark: #79502d;--rim-light: #e0bf84;--attacker-light: #63564a;--defender-light: #fff4d8;--king-light: #ffe4a0;--wood: #a77945;--wood-line: rgba(30, 16, 6, 0.55);--coord: #302216;--square: rgba(255, 240, 210, 0.08);--square-edge: rgba(255, 250, 235, 0.11);--throne: rgba(240, 165, 58, 0.35);--corner: rgba(109, 52, 29, 0.22);--attacker: #2a2320;--attacker-rim: #211a15;--defender: #ece4d0;--defender-rim: #b9ab8b;--king: #f0d58a;--king-rim: #a67c1a;--crown: #6b4a0f;}
/* Tablut: an excavated-object aesthetic, with limestone and aged counters. */.artwork[data-set='tablut'].svelte-14xsz9c {--surface-light: #aaa18b;--surface-dark: #797564;--rim-light: #c4b99e;--attacker-light: #534f43;--defender-light: #ded0ae;--king-light: #e5cc92;--wood: #8a8578;--wood-line: rgba(36, 32, 27, 0.45);--coord: #37362c;--square: rgba(255, 250, 235, 0.05);--square-edge: rgba(255, 250, 235, 0.09);--throne: rgba(120, 100, 70, 0.4);--corner: transparent;--attacker: #3d3530;--attacker-rim: #29281f;--defender: #cfc4ad;--defender-rim: #8c8069;--king: #c9b27a;--king-rim: #7d6636;--crown: #5a4a2a;}.artwork.svelte-14xsz9c {width:100%;height:auto;display:block;}.wood.svelte-14xsz9c {stroke:#797564;stroke-width:1.4;}.stain.svelte-14xsz9c {fill:#fff;pointer-events:none;}.chip.svelte-14xsz9c {fill:rgba(28, 24, 20, 0.42);stroke:rgba(230, 222, 205, 0.18);stroke-width:0.6;pointer-events:none;}.crack.svelte-14xsz9c {fill:none;stroke:rgba(43, 39, 29, 0.48);stroke-width:0.5;stroke-linecap:round;pointer-events:none;}.coord.svelte-14xsz9c {fill:#37362c;font-family:Georgia, serif;font-size:9px;font-weight:600;pointer-events:none;}.square.svelte-14xsz9c {fill:rgba(255, 250, 235, 0.05);stroke:rgba(36, 32, 27, 0.45);stroke-width:0.65;cursor:default;transition:fill 0.3s ease;}.square.edge.svelte-14xsz9c {fill:rgba(255, 250, 235, 0.09);}.square.throne.svelte-14xsz9c {fill:rgba(120, 100, 70, 0.4);}.square.corner.svelte-14xsz9c {fill:transparent;}.square.last.svelte-14xsz9c {fill:rgba(140, 200, 224, 0.28);}.square.target.svelte-14xsz9c {cursor:pointer;}.square.fallen.svelte-14xsz9c {fill:rgba(224, 101, 92, 0.45);}.square.svelte-14xsz9c:focus-visible {outline:none;stroke:#9ccbdd;stroke-width:2.5;}.hint.svelte-14xsz9c {fill:#9ccbdd;opacity:0.85;}.piece.svelte-14xsz9c {transition:transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1),
opacity 0.3s ease;}.piece.dying.svelte-14xsz9c {opacity:0;}.board-rim.svelte-14xsz9c {fill:none;stroke:#c4b99e;stroke-width:0.7;opacity:0.65;pointer-events:none;}.join.svelte-14xsz9c {fill:none;stroke:#50351f;stroke-width:0.6;opacity:0.18;pointer-events:none;}.surface-wear.svelte-14xsz9c {pointer-events:none;}.crack-light.svelte-14xsz9c {fill:none;stroke:#e1d6bd;stroke-width:0.55;opacity:0.45;}.inlay.svelte-14xsz9c {fill:none;stroke:#c4b99e;stroke-width:0.8;opacity:0.75;pointer-events:none;}.artwork[data-set='tablut'].svelte-14xsz9c .inlay.svelte-14xsz9c {stroke:#494638;opacity:0.45;}.piece.svelte-14xsz9c {--piece-rim: #8c8069;}.piece.attacker.svelte-14xsz9c {--piece-rim: #29281f;}.piece.king.svelte-14xsz9c {--piece-rim: #7d6636;}.piece.svelte-14xsz9c .shadow.svelte-14xsz9c {fill:#16130e;opacity:0.28;}.piece.svelte-14xsz9c .base.svelte-14xsz9c {fill:#8c8069;}.piece.svelte-14xsz9c .body.svelte-14xsz9c {stroke:#8c8069;stroke-width:0.65;}.bevel-light.svelte-14xsz9c {fill:none;stroke:#fff1cc;stroke-width:0.9;opacity:0.48;stroke-linecap:round;}.bevel-dark.svelte-14xsz9c {fill:none;stroke:#211d16;stroke-width:0.8;opacity:0.3;stroke-linecap:round;}.turned.svelte-14xsz9c {fill:none;stroke:#8c8069;stroke-width:0.45;opacity:0.35;}.counter-wear.svelte-14xsz9c {fill:none;stroke:#534b37;stroke-width:0.5;opacity:0.3;stroke-linecap:round;}.attacker.svelte-14xsz9c .counter-wear.svelte-14xsz9c {stroke:#d6c6a3;opacity:0.23;}.artwork[data-set='tablut'].svelte-14xsz9c .bevel-light.svelte-14xsz9c {opacity:0.25;stroke-width:1.1;}.artwork[data-set='tablut'].svelte-14xsz9c .turned.svelte-14xsz9c {display:none;}.pit.svelte-14xsz9c {fill:#544b38;opacity:0.3;}.attacker.svelte-14xsz9c .pit.svelte-14xsz9c {fill:#d6c6a3;opacity:0.2;}.piece.svelte-14xsz9c .crown.svelte-14xsz9c {fill:#5a4a2a;stroke:#5a4a2a;stroke-width:0.7;stroke-linejoin:round;}.piece.svelte-14xsz9c .crown-gleam.svelte-14xsz9c {fill:#f8e5b2;stroke:#f8e5b2;stroke-width:0.9;opacity:0.7;}.piece.selected.svelte-14xsz9c .body.svelte-14xsz9c {stroke:#9ccbdd;stroke-width:2.5;}.calm.svelte-14xsz9c .piece.svelte-14xsz9c, .calm.svelte-14xsz9c .square.svelte-14xsz9c {transition:none;}.piece.attacker .base{fill:#29281f}.piece.attacker .body,.piece.attacker .turned{stroke:#29281f}.piece.defender .base{fill:#8c8069}.piece.defender .body,.piece.defender .turned{stroke:#8c8069}.piece.king .base{fill:#7d6636}.piece.king .body,.piece.king .turned{stroke:#7d6636}</style><defs><linearGradient id="s1-surface" x2="0.85" y2="1"><stop stop-color="#aaa18b"></stop><stop offset="0.48" stop-color="#8a8578"></stop><stop offset="1" stop-color="#797564"></stop></linearGradient><filter id="s1-grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.48" numOctaves="3" seed="7" result="noise"></feTurbulence><feColorMatrix in="noise" type="saturate" values="0"></feColorMatrix><feComponentTransfer result="soft"><feFuncA type="linear" slope="0.2"></feFuncA></feComponentTransfer><feBlend in="SourceGraphic" in2="soft" mode="multiply"></feBlend></filter><filter id="s1-worn" x="-5%" y="-5%" width="110%" height="110%"><feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="2" seed="3" result="warp"></feTurbulence><feDisplacementMap in="SourceGraphic" in2="warp" scale="1.15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter><filter id="s1-mottle" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="3" seed="11"></feTurbulence><feColorMatrix type="matrix" values="0 0 0 0 0.20 0 0 0 0 0.17 0 0 0 0 0.12 0.28 0 0 0 0"></feColorMatrix><feComposite in2="SourceGraphic" operator="in"></feComposite></filter><radialGradient id="s1-attacker" cx="32%" cy="24%" r="80%"><stop stop-color="#534f43"></stop><stop offset="0.85" stop-color="#3d3530"></stop><stop offset="1" stop-color="#3d3530"></stop></radialGradient><radialGradient id="s1-defender" cx="32%" cy="24%" r="80%"><stop stop-color="#ded0ae"></stop><stop offset="0.85" stop-color="#cfc4ad"></stop><stop offset="1" stop-color="#cfc4ad"></stop></radialGradient><radialGradient id="s1-king" cx="32%" cy="24%" r="80%"><stop stop-color="#e5cc92"></stop><stop offset="0.85" stop-color="#c9b27a"></stop><stop offset="1" stop-color="#c9b27a"></stop></radialGradient></defs><rect class="wood svelte-14xsz9c" x="0.7" y="0.7" width="370.6" height="370.6" rx="3" fill="url(#s1-surface)" filter="url(#s1-grain)"></rect><rect class="board-rim svelte-14xsz9c" x="2" y="2" width="368" height="368" rx="2"></rect><rect class="stain svelte-14xsz9c" x="2" y="2" width="368" height="368" rx="3" filter="url(#s1-mottle)"></rect><g class="surface-wear svelte-14xsz9c" aria-hidden="true"><path class="chip svelte-14xsz9c" d="M6 6 l5 0 l-1 4 l-4 2 z"></path><path class="chip svelte-14xsz9c" d="M366 86 l-7 0 l3 4 l4 4 z"></path><path class="chip svelte-14xsz9c" d="M166 366 l-6 0 l0 -6 l6 -1 z"></path><path class="chip svelte-14xsz9c" d="M6 286 l7 0 l-3 -4 l-4 -4 z"></path><path clasLine truncated
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

static/og.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 112 KiB

After

Width:  |  Height:  |  Size: 260 KiB