From: Geoffrey Allott <geoffrey@allott.email>
Date: Mon, 15 Mar 2021 20:24:39 +0000 (+0000)
Subject: move card svg into one file for all cards and create manual paths for suit glyphs
X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=d3721c5179d6d543b72646cc88b9372bb5f38d7d;p=pokerwave.git

move card svg into one file for all cards and create manual paths for suit glyphs
---

diff --git a/site/img/card-2c.svg b/site/img/card-2c.svg
deleted file mode 100644
index 2afaf55..0000000
--- a/site/img/card-2c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">2</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-2d.svg b/site/img/card-2d.svg
deleted file mode 100644
index d781c5f..0000000
--- a/site/img/card-2d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">2</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-2h.svg b/site/img/card-2h.svg
deleted file mode 100644
index 2b5ae9d..0000000
--- a/site/img/card-2h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">2</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-2s.svg b/site/img/card-2s.svg
deleted file mode 100644
index bf9d374..0000000
--- a/site/img/card-2s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">2</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-3c.svg b/site/img/card-3c.svg
deleted file mode 100644
index 9cce91c..0000000
--- a/site/img/card-3c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">3</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-3d.svg b/site/img/card-3d.svg
deleted file mode 100644
index 87692b0..0000000
--- a/site/img/card-3d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">3</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-3h.svg b/site/img/card-3h.svg
deleted file mode 100644
index 78a125f..0000000
--- a/site/img/card-3h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">3</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-3s.svg b/site/img/card-3s.svg
deleted file mode 100644
index d80d75e..0000000
--- a/site/img/card-3s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">3</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-4c.svg b/site/img/card-4c.svg
deleted file mode 100644
index c647371..0000000
--- a/site/img/card-4c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">4</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-4d.svg b/site/img/card-4d.svg
deleted file mode 100644
index f3d8128..0000000
--- a/site/img/card-4d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">4</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-4h.svg b/site/img/card-4h.svg
deleted file mode 100644
index cfaa1d0..0000000
--- a/site/img/card-4h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">4</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-4s.svg b/site/img/card-4s.svg
deleted file mode 100644
index 4c9a7f4..0000000
--- a/site/img/card-4s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">4</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-5c.svg b/site/img/card-5c.svg
deleted file mode 100644
index d0822b1..0000000
--- a/site/img/card-5c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">5</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-5d.svg b/site/img/card-5d.svg
deleted file mode 100644
index c7d1d3f..0000000
--- a/site/img/card-5d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">5</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-5h.svg b/site/img/card-5h.svg
deleted file mode 100644
index 38c8da3..0000000
--- a/site/img/card-5h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">5</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-5s.svg b/site/img/card-5s.svg
deleted file mode 100644
index 1bae79e..0000000
--- a/site/img/card-5s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">5</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-6c.svg b/site/img/card-6c.svg
deleted file mode 100644
index 458d98a..0000000
--- a/site/img/card-6c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">6</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-6d.svg b/site/img/card-6d.svg
deleted file mode 100644
index d61f2fc..0000000
--- a/site/img/card-6d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">6</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-6h.svg b/site/img/card-6h.svg
deleted file mode 100644
index eb27710..0000000
--- a/site/img/card-6h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">6</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-6s.svg b/site/img/card-6s.svg
deleted file mode 100644
index b7217ef..0000000
--- a/site/img/card-6s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">6</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-7c.svg b/site/img/card-7c.svg
deleted file mode 100644
index a384abb..0000000
--- a/site/img/card-7c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">7</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-7d.svg b/site/img/card-7d.svg
deleted file mode 100644
index fccc289..0000000
--- a/site/img/card-7d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">7</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-7h.svg b/site/img/card-7h.svg
deleted file mode 100644
index 9218ab4..0000000
--- a/site/img/card-7h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">7</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-7s.svg b/site/img/card-7s.svg
deleted file mode 100644
index 5771662..0000000
--- a/site/img/card-7s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">7</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-8c.svg b/site/img/card-8c.svg
deleted file mode 100644
index 0fc2832..0000000
--- a/site/img/card-8c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">8</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-8d.svg b/site/img/card-8d.svg
deleted file mode 100644
index b91ddcd..0000000
--- a/site/img/card-8d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">8</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-8h.svg b/site/img/card-8h.svg
deleted file mode 100644
index 44a54b3..0000000
--- a/site/img/card-8h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">8</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-8s.svg b/site/img/card-8s.svg
deleted file mode 100644
index 2a65b28..0000000
--- a/site/img/card-8s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">8</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-9c.svg b/site/img/card-9c.svg
deleted file mode 100644
index a7f9706..0000000
--- a/site/img/card-9c.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">9</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-9d.svg b/site/img/card-9d.svg
deleted file mode 100644
index 8c86ba2..0000000
--- a/site/img/card-9d.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">9</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-9h.svg b/site/img/card-9h.svg
deleted file mode 100644
index bd760ad..0000000
--- a/site/img/card-9h.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">9</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-9s.svg b/site/img/card-9s.svg
deleted file mode 100644
index 1ad161e..0000000
--- a/site/img/card-9s.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">9</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Ac.svg b/site/img/card-Ac.svg
deleted file mode 100644
index 8f8178d..0000000
--- a/site/img/card-Ac.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Ad.svg b/site/img/card-Ad.svg
deleted file mode 100644
index 5547b38..0000000
--- a/site/img/card-Ad.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Ah.svg b/site/img/card-Ah.svg
deleted file mode 100644
index 4251cac..0000000
--- a/site/img/card-Ah.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-As.svg b/site/img/card-As.svg
deleted file mode 100644
index e5ab9af..0000000
--- a/site/img/card-As.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Jc.svg b/site/img/card-Jc.svg
deleted file mode 100644
index eb1e194..0000000
--- a/site/img/card-Jc.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="175" y="50" style="font: bold 45px serif;">J</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Jd.svg b/site/img/card-Jd.svg
deleted file mode 100644
index d6e5271..0000000
--- a/site/img/card-Jd.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="175" y="50" style="font: bold 45px serif;" fill="red">J</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Jh.svg b/site/img/card-Jh.svg
deleted file mode 100644
index 609ab30..0000000
--- a/site/img/card-Jh.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="175" y="50" style="font: bold 45px serif;" fill="red">J</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Js.svg b/site/img/card-Js.svg
deleted file mode 100644
index d61fda4..0000000
--- a/site/img/card-Js.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="175" y="50" style="font: bold 45px serif;">J</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Kc.svg b/site/img/card-Kc.svg
deleted file mode 100644
index 13f455c..0000000
--- a/site/img/card-Kc.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="160" y="60" style="font: bold 50px serif;">K</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Kd.svg b/site/img/card-Kd.svg
deleted file mode 100644
index 1edcfc2..0000000
--- a/site/img/card-Kd.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="160" y="60" style="font: bold 50px serif;" fill="red">K</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Kh.svg b/site/img/card-Kh.svg
deleted file mode 100644
index 9c70f65..0000000
--- a/site/img/card-Kh.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="160" y="60" style="font: bold 50px serif;" fill="red">K</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Ks.svg b/site/img/card-Ks.svg
deleted file mode 100644
index 03708c6..0000000
--- a/site/img/card-Ks.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="160" y="60" style="font: bold 50px serif;">K</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Qc.svg b/site/img/card-Qc.svg
deleted file mode 100644
index b08cabd..0000000
--- a/site/img/card-Qc.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">Q</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Qd.svg b/site/img/card-Qd.svg
deleted file mode 100644
index f095977..0000000
--- a/site/img/card-Qd.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">Q</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Qh.svg b/site/img/card-Qh.svg
deleted file mode 100644
index a57a540..0000000
--- a/site/img/card-Qh.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;" fill="red">Q</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Qs.svg b/site/img/card-Qs.svg
deleted file mode 100644
index edc4c07..0000000
--- a/site/img/card-Qs.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">Q</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Tc.svg b/site/img/card-Tc.svg
deleted file mode 100644
index 0236727..0000000
--- a/site/img/card-Tc.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="150" y="60" style="font: bold 50px serif;" textLength="55px">10</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Td.svg b/site/img/card-Td.svg
deleted file mode 100644
index 7c492b0..0000000
--- a/site/img/card-Td.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="150" y="60" style="font: bold 50px serif;" textLength="55px" fill="red">10</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♢</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Th.svg b/site/img/card-Th.svg
deleted file mode 100644
index 3e40f9f..0000000
--- a/site/img/card-Th.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="150" y="60" style="font: bold 50px serif;" textLength="55px" fill="red">10</text>
-        <text x="150" y="120" style="font: bold 75px serif;" fill="red">♡</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/card-Ts.svg b/site/img/card-Ts.svg
deleted file mode 100644
index 0bad8c7..0000000
--- a/site/img/card-Ts.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="150" y="60" style="font: bold 50px serif;" textLength="55px">10</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
-</svg>
diff --git a/site/img/cards.svg b/site/img/cards.svg
new file mode 100644
index 0000000..53a6b50
--- /dev/null
+++ b/site/img/cards.svg
@@ -0,0 +1,397 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
+    <rect id="card-front" x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
+    <text id="b2" x="165" y="60" style="font: bold 50px serif;">2</text>
+    <text id="r2" x="165" y="60" style="font: bold 50px serif;" fill="red">2</text>
+    <text id="b3" x="165" y="60" style="font: bold 50px serif;">3</text>
+    <text id="r3" x="165" y="60" style="font: bold 50px serif;" fill="red">3</text>
+    <text id="b4" x="165" y="60" style="font: bold 50px serif;">4</text>
+    <text id="r4" x="165" y="60" style="font: bold 50px serif;" fill="red">4</text>
+    <text id="b5" x="165" y="60" style="font: bold 50px serif;">5</text>
+    <text id="r5" x="165" y="60" style="font: bold 50px serif;" fill="red">5</text>
+    <text id="b6" x="165" y="60" style="font: bold 50px serif;">6</text>
+    <text id="r6" x="165" y="60" style="font: bold 50px serif;" fill="red">6</text>
+    <text id="b7" x="165" y="60" style="font: bold 50px serif;">7</text>
+    <text id="r7" x="165" y="60" style="font: bold 50px serif;" fill="red">7</text>
+    <text id="b8" x="165" y="60" style="font: bold 50px serif;">8</text>
+    <text id="r8" x="165" y="60" style="font: bold 50px serif;" fill="red">8</text>
+    <text id="b9" x="165" y="60" style="font: bold 50px serif;">9</text>
+    <text id="r9" x="165" y="60" style="font: bold 50px serif;" fill="red">9</text>
+    <text id="bT" x="150" y="60" style="font: bold 50px serif;" textLength="55px">10</text>
+    <text id="rT" x="150" y="60" style="font: bold 50px serif;" textLength="55px" fill="red">10</text>
+    <text id="bJ" x="175" y="60" style="font: bold 50px serif;">J</text>
+    <text id="rJ" x="175" y="60" style="font: bold 50px serif;" fill="red">J</text>
+    <text id="bQ" x="165" y="60" style="font: bold 50px serif;">Q</text>
+    <text id="rQ" x="165" y="60" style="font: bold 50px serif;" fill="red">Q</text>
+    <text id="bK" x="160" y="60" style="font: bold 50px serif;">K</text>
+    <text id="rK" x="160" y="60" style="font: bold 50px serif;" fill="red">K</text>
+    <text id="bA" x="165" y="60" style="font: bold 50px serif;">A</text>
+    <text id="rA" x="165" y="60" style="font: bold 50px serif;" fill="red">A</text>
+    <path id="c" d="M 185 125 m -12 0 c 8 -4 8 -8 8 -12 c -32 16 -32 -32 -4 -20 c -24 -36 40 -36 16 0 c 28 -12 28 36 -4 20 c 0 4 0 8 8 12 Z" fill="black" />
+    <path id="d" d="M 185 125 l -22 -30 l 22 -30 l 22 30 Z" fill="red" />
+    <path id="h" d="M 185 125 l -17 -22 c -23 -30 7 -51 17 -20 c 10 -31 40 -10 17 20 Z" fill="red" />
+    <path id="s" d="M 185 125 m -12 0 c 8 -4 8 -8 8 -18 c -9 18 -46 2 4 -44 c 50 46 13 62 4 44 c 1 11 1 15 8 18 Z" fill="black" />
+    <svg id="2c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b2" />
+        <use href="#c" />
+        <use href="#b2" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="2d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r2" />
+        <use href="#d" />
+        <use href="#r2" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="2h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r2" />
+        <use href="#h" />
+        <use href="#r2" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="2s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b2" />
+        <use href="#s" />
+        <use href="#b2" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="3c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b3" />
+        <use href="#c" />
+        <use href="#b3" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="3d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r3" />
+        <use href="#d" />
+        <use href="#r3" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="3h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r3" />
+        <use href="#h" />
+        <use href="#r3" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="3s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b3" />
+        <use href="#s" />
+        <use href="#b3" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="4c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b4" />
+        <use href="#c" />
+        <use href="#b4" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="4d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r4" />
+        <use href="#d" />
+        <use href="#r4" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="4h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r4" />
+        <use href="#h" />
+        <use href="#r4" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="4s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b4" />
+        <use href="#s" />
+        <use href="#b4" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="5c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b5" />
+        <use href="#c" />
+        <use href="#b5" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="5d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r5" />
+        <use href="#d" />
+        <use href="#r5" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="5h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r5" />
+        <use href="#h" />
+        <use href="#r5" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="5s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b5" />
+        <use href="#s" />
+        <use href="#b5" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="6c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b6" />
+        <use href="#c" />
+        <use href="#b6" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="6d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r6" />
+        <use href="#d" />
+        <use href="#r6" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="6h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r6" />
+        <use href="#h" />
+        <use href="#r6" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="6s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b6" />
+        <use href="#s" />
+        <use href="#b6" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="7c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b7" />
+        <use href="#c" />
+        <use href="#b7" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="7d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r7" />
+        <use href="#d" />
+        <use href="#r7" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="7h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r7" />
+        <use href="#h" />
+        <use href="#r7" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="7s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b7" />
+        <use href="#s" />
+        <use href="#b7" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="8c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b8" />
+        <use href="#c" />
+        <use href="#b8" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="8d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r8" />
+        <use href="#d" />
+        <use href="#r8" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="8h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r8" />
+        <use href="#h" />
+        <use href="#r8" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="8s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b8" />
+        <use href="#s" />
+        <use href="#b8" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="9c" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b9" />
+        <use href="#c" />
+        <use href="#b9" transform="rotate(180 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="9d" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r9" />
+        <use href="#d" />
+        <use href="#r9" transform="rotate(180 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="9h" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#r9" />
+        <use href="#h" />
+        <use href="#r9" transform="rotate(180 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="9s" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#b9" />
+        <use href="#s" />
+        <use href="#b9" transform="rotate(180 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Tc" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bT" />
+        <use href="#c" />
+        <use href="#bT" transform="rotate(181 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Td" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rT" />
+        <use href="#d" />
+        <use href="#rT" transform="rotate(181 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Th" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rT" />
+        <use href="#h" />
+        <use href="#rT" transform="rotate(181 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Ts" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bT" />
+        <use href="#s" />
+        <use href="#bT" transform="rotate(181 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Jc" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bJ" />
+        <use href="#c" />
+        <use href="#bJ" transform="rotate(182 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Jd" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rJ" />
+        <use href="#d" />
+        <use href="#rJ" transform="rotate(182 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Jh" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rJ" />
+        <use href="#h" />
+        <use href="#rJ" transform="rotate(182 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Js" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bJ" />
+        <use href="#s" />
+        <use href="#bJ" transform="rotate(182 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Qc" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bQ" />
+        <use href="#c" />
+        <use href="#bQ" transform="rotate(182 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Qd" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rQ" />
+        <use href="#d" />
+        <use href="#rQ" transform="rotate(182 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Qh" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rQ" />
+        <use href="#h" />
+        <use href="#rQ" transform="rotate(182 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Qs" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bQ" />
+        <use href="#s" />
+        <use href="#bQ" transform="rotate(182 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Kc" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bK" />
+        <use href="#c" />
+        <use href="#bK" transform="rotate(182 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Kd" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rK" />
+        <use href="#d" />
+        <use href="#rK" transform="rotate(182 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Kh" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rK" />
+        <use href="#h" />
+        <use href="#rK" transform="rotate(182 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Ks" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bK" />
+        <use href="#s" />
+        <use href="#bK" transform="rotate(182 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Ac" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bA" />
+        <use href="#c" />
+        <use href="#bA" transform="rotate(182 112.5 175)" />
+        <use href="#c" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Ad" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rA" />
+        <use href="#d" />
+        <use href="#rA" transform="rotate(182 112.5 175)" />
+        <use href="#d" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="Ah" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#rA" />
+        <use href="#h" />
+        <use href="#rA" transform="rotate(182 112.5 175)" />
+        <use href="#h" transform="rotate(180 112.5 175)" />
+    </svg>
+    <svg id="As" viewBox="0 0 225 350">
+        <use href="#card-front" />
+        <use href="#bA" />
+        <use href="#s" />
+        <use href="#bA" transform="rotate(182 112.5 175)" />
+        <use href="#s" transform="rotate(180 112.5 175)" />
+    </svg>
+</svg>
diff --git a/site/img/suit-c.svg b/site/img/suit-c.svg
deleted file mode 100644
index 07704cb..0000000
--- a/site/img/suit-c.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <text x="17.5" y="75" style="font: bold 75px serif;">♣</text>
-</svg>
diff --git a/site/img/suit-d.svg b/site/img/suit-d.svg
deleted file mode 100644
index ac979d5..0000000
--- a/site/img/suit-d.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <text x="17.5" y="75" style="font: bold 75px serif;" fill="red">♢</text>
-</svg>
diff --git a/site/img/suit-h.svg b/site/img/suit-h.svg
deleted file mode 100644
index b257083..0000000
--- a/site/img/suit-h.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <text x="17.5" y="75" style="font: bold 75px serif;" fill="red">♡</text>
-</svg>
diff --git a/site/img/suit-s.svg b/site/img/suit-s.svg
deleted file mode 100644
index 0c2c641..0000000
--- a/site/img/suit-s.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-    <text x="17.5" y="75" style="font: bold 75px serif;">♠</text>
-</svg>
diff --git a/site/img/suits.svg b/site/img/suits.svg
new file mode 100644
index 0000000..2fa350f
--- /dev/null
+++ b/site/img/suits.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+    <svg id="c" viewBox="0 0 100 100">
+        <path d="M 50 75 m -12 0 c 8 -4 8 -8 8 -12 c -32 16 -32 -32 -4 -20 c -24 -36 40 -36 16 0 c 28 -12 28 36 -4 20 c 0 4 0 8 8 12 Z" fill="black" />
+    </svg>
+    <svg id="d" viewBox="0 0 100 100">
+        <path d="M 50 75 l -22 -30 l 22 -30 l 22 30 Z" fill="red" />
+    </svg>
+    <svg id="h" viewBox="0 0 100 100">
+        <path d="M 50 75 l -17 -22 c -23 -30 7 -51 17 -20 c 10 -31 40 -10 17 20 Z" fill="red" />
+    </svg>
+    <svg id="s" viewBox="0 0 100 100">
+        <path d="M 50 75 m -12 0 c 8 -4 8 -8 8 -18 c -9 18 -46 2 4 -44 c 50 46 13 62 4 44 c 1 11 1 15 8 18 Z" fill="black" />
+    </svg>
+</svg>
diff --git a/site/modules/card.js b/site/modules/card.js
index 6fef6b2..4a3771d 100644
--- a/site/modules/card.js
+++ b/site/modules/card.js
@@ -27,11 +27,11 @@ export function short_suit(suit) {
 
 export function card_href(card) {
     if (card === null) return "img/card-back-blue.svg";
-    return "img/card-" + short_rank(card.rank) + short_suit(card.suit) + ".svg";
+    return "img/cards.svg#" + short_rank(card.rank) + short_suit(card.suit);
 }
 
 export function suit_href(suit) {
-    return "img/suit-" + short_suit(suit) + ".svg";
+    return "img/suits.svg#" + short_suit(suit);
 }
 
 export const FIFTY_TWO_CARD_DECK = [
diff --git a/site/modules/poker.js b/site/modules/poker.js
index b1c6d52..e9f128c 100644
--- a/site/modules/poker.js
+++ b/site/modules/poker.js
@@ -217,7 +217,7 @@ export class TexasHoldEm {
     }
 
     card_image(username, card) {
-        const image = document.createElementNS(svgns, "image");
+        const image = document.createElementNS(svgns, "use");
         image.setAttribute("width", "45");
         image.setAttribute("height", "70");
         image.setAttribute("href", card_href(card));
diff --git a/site/modules/whist.js b/site/modules/whist.js
index 424b56a..4c0ba07 100644
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -62,7 +62,7 @@ export class KnockOutWhist {
             highlight.onclick = () => this.send({type: "TakeAction", action: {action: "ChooseTrumps", suit: suit}});
             this.svg.append(highlight);
             this.glyphs.set(suit, highlight);
-            const glyph = document.createElementNS(svgns, "image");
+            const glyph = document.createElementNS(svgns, "use");
             glyph.setAttribute("x", x);
             glyph.setAttribute("y", "235");
             glyph.setAttribute("width", "25");
@@ -161,7 +161,7 @@ export class KnockOutWhist {
     }
 
     card_image(username, card) {
-        const image = document.createElementNS(svgns, "image");
+        const image = document.createElementNS(svgns, "use");
         image.setAttribute("width", "45");
         image.setAttribute("height", "70");
         image.setAttribute("href", card_href(card));
diff --git a/site/modules/winner.js b/site/modules/winner.js
index c4e9b30..50bc0fb 100644
--- a/site/modules/winner.js
+++ b/site/modules/winner.js
@@ -43,7 +43,7 @@ export class CongratulateWinner {
     }
 
     card_image(card) {
-        const image = document.createElementNS(svgns, "image");
+        const image = document.createElementNS(svgns, "use");
         image.setAttribute("width", "45");
         image.setAttribute("height", "70");
         image.setAttribute("x", random_int(500 - 45));
diff --git a/site/test.html b/site/test.html
deleted file mode 100644
index aea30b4..0000000
--- a/site/test.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="./style.css" />
-    </head>
-    <body>
-        <div id="game-tile-background">
-            <svg class="knock-out-whist" viewbox="0 0 500 500">
-                <rect x="0" y="0" width="500" height="500" fill="#404040" />
-                <ellipse cx="250" cy="253" rx="250" ry="110" fill="#604010" />
-                <ellipse cx="250" cy="250" rx="240" ry="100" fill="green" />
-                <image x="240" y="290" width="45" height="70" href="img/card-Kd.svg" />
-                <image x="220" y="290" width="45" height="70" href="img/card-Ks.svg" />
-                <image x="220" y="80" width="45" height="70" href="img/card-back-blue.svg" />
-                <image x="240" y="80" width="45" height="70" href="img/card-back-blue.svg" />
-            </svg>
-        </div>
-    </body>
-</html>