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
2026-09-23 19:32:15 -04:00
parent 145667ea0d
commit a213a238d3
12 changed files with 1089 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/og-card.html
+12 -32
View File
@@ -1,33 +1,13 @@
<!doctype html>
<html><head><meta charset="utf-8"><style>
html,body{margin:0;background:#14181a}
.card{width:1200px;height:630px;display:flex;align-items:center;gap:64px;padding:0 80px;box-sizing:border-box;background:#14181a;color:#e6dfcf;font-family:'Iowan Old Style',Georgia,serif}
.board{flex:0 0 470px;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
h1{font-weight:300;font-size:92px;letter-spacing:-.01em;margin:0 0 14px}
p{font-size:31px;line-height:1.35;color:#9ea59e;margin:0}
p b{color:#e6dfcf;font-weight:500}
.foot{margin-top:28px;font-size:24px;color:#626b66}
</style></head><body><div class="card">
<svg class="board" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
<rect width="110" height="110" rx="4" fill="#8a5a2b"/>
<g id="grid"></g>
</svg>
<div>
<h1>Hnefatafl</h1>
<p><b>The Viking board game.</b> One king, one throne, four corners, and a ring of attackers closing in. Play a housecarl or a friend, by Copenhagen rules or Linnaeus's Tablut.</p>
<p class="foot">tafl.kestrelsnest.social · free, no accounts</p>
</div></div>
<script>
const g = document.getElementById('grid'); const ns = 'http://www.w3.org/2000/svg';
const el = (t, a) => { const e = document.createElementNS(ns, t); for (const k in a) e.setAttribute(k, a[k]); g.appendChild(e); };
for (let r = 0; r < 11; r++) for (let c = 0; c < 11; c++) {
const corner = (r === 0 || r === 10) && (c === 0 || c === 10), throne = r === 5 && c === 5;
el('rect', { x: c * 10, y: r * 10, width: 10, height: 10, fill: corner ? 'rgba(224,101,92,0.4)' : throne ? 'rgba(240,165,58,0.4)' : 'rgba(255,240,210,0.08)', stroke: 'rgba(30,16,6,0.5)', 'stroke-width': 0.4 });
}
const a = [[3,0],[4,0],[5,0],[6,0],[7,0],[5,1],[0,3],[10,3],[0,4],[10,4],[0,5],[1,5],[9,5],[10,5],[0,6],[10,6],[0,7],[10,7],[5,9],[3,10],[4,10],[5,10],[6,10],[7,10]];
const d = [[5,3],[4,4],[5,4],[6,4],[3,5],[4,5],[6,5],[7,5],[4,6],[5,6],[6,6],[5,7]];
for (const [x, y] of a) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#2a2320', stroke: '#0d0a08', 'stroke-width': 0.6 });
for (const [x, y] of d) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#ece4d0', stroke: '#b9ab8b', 'stroke-width': 0.6 });
el('circle', { cx: 55, cy: 55, r: 3.6, fill: '#f0d58a', stroke: '#a67c1a', 'stroke-width': 0.6 });
el('path', { d: 'M52.6 56.4 l0 -2.6 l1.3 1.4 l1.1 -2.3 l1.1 2.3 l1.3 -1.4 l0 2.6 z', fill: '#6b4a0f' });
</script></body></html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hnefatafl share card</title>
<style>html,body{margin:0;background:#14181a}img{display:block;width:1200px;height:630px;max-width:100%;object-fit:contain;object-position:top left}</style>
</head>
<body>
<!-- Generated from BoardArtwork.svelte by npm run art; also produces static/og.png. -->
<img src="og-card.svg" width="1200" height="630" alt="Hnefatafl. The Viking board game. Play a housecarl or a friend, Copenhagen or Linnaeus’s Tablut. Free, no accounts. tafl.kestrelsnest.social">
</body>
</html>