From 7897aa8a6c6ced060dd58d9e0fca34b654c0b7e2 Mon Sep 17 00:00:00 2001
From: Geoffrey Allott <geoffrey@allott.email>
Date: Mon, 15 Mar 2021 21:08:43 +0000
Subject: [PATCH] reduce duplication

---
 site/img/cards.svg | 247 +++++++++++++++++++++------------------------
 1 file changed, 117 insertions(+), 130 deletions(-)

diff --git a/site/img/cards.svg b/site/img/cards.svg
index 882f84d..dcae5a4 100644
--- a/site/img/cards.svg
+++ b/site/img/cards.svg
@@ -1,397 +1,384 @@
 <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>
-    <path id="bJ" d="M 180 60 m -13 -16 c 0 8 3 16 13 16 c 14 0 16 -7 16 -16 v -24 l 3 0 l 4 3 v -7 l -4 1 h -20 l -4 -1 v 7 l 4 -3 l 9 0 v 22 c 0 8 -2 14 -8 14 c -6 0 -8 -4 -8 -12 l 3 -3 h -11 Z" fill="black" />
-    <path id="rJ" d="M 180 60 m -13 -16 c 0 8 3 16 13 16 c 14 0 16 -7 16 -16 v -24 l 3 0 l 4 3 v -7 l -4 1 h -20 l -4 -1 v 7 l 4 -3 l 9 0 v 22 c 0 8 -2 14 -8 14 c -6 0 -8 -4 -8 -12 l 3 -3 h -11 Z" fill="red" />
-    <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>
+    <text id="2" x="165" y="60" style="font: bold 50px serif;">2</text>
+    <text id="3" x="165" y="60" style="font: bold 50px serif;">3</text>
+    <text id="4" x="165" y="60" style="font: bold 50px serif;">4</text>
+    <text id="5" x="165" y="60" style="font: bold 50px serif;">5</text>
+    <text id="6" x="165" y="60" style="font: bold 50px serif;">6</text>
+    <text id="7" x="165" y="60" style="font: bold 50px serif;">7</text>
+    <text id="8" x="165" y="60" style="font: bold 50px serif;">8</text>
+    <text id="9" x="165" y="60" style="font: bold 50px serif;">9</text>
+    <text id="T" x="150" y="60" style="font: bold 50px serif;" textLength="55px">10</text>
+    <path id="J" d="M 180 60 m -13 -16 c 0 8 3 16 13 16 c 14 0 16 -7 16 -16 v -24 l 3 0 l 4 3 v -7 l -4 1 h -20 l -4 -1 v 7 l 4 -3 l 9 0 v 22 c 0 8 -2 14 -8 14 c -6 0 -8 -4 -8 -12 l 3 -3 h -11 Z" fill="black" />
+    <text id="Q" x="165" y="60" style="font: bold 50px serif;">Q</text>
+    <text id="K" x="160" y="60" style="font: bold 50px serif;">K</text>
+    <text id="A" x="165" y="60" style="font: bold 50px serif;">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="#2" />
         <use href="#c" />
-        <use href="#b2" transform="rotate(180 112.5 175)" />
+        <use href="#2" 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="#2" fill="red" />
         <use href="#d" />
-        <use href="#r2" transform="rotate(180 112.5 175)" />
+        <use href="#2" fill="red" 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="#2" fill="red" />
         <use href="#h" />
-        <use href="#r2" transform="rotate(180 112.5 175)" />
+        <use href="#2" fill="red" 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="#2" />
         <use href="#s" />
-        <use href="#b2" transform="rotate(180 112.5 175)" />
+        <use href="#2" 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="#3" />
         <use href="#c" />
-        <use href="#b3" transform="rotate(180 112.5 175)" />
+        <use href="#3" 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="#3" fill="red" />
         <use href="#d" />
-        <use href="#r3" transform="rotate(180 112.5 175)" />
+        <use href="#3" fill="red" 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="#3" fill="red" />
         <use href="#h" />
-        <use href="#r3" transform="rotate(180 112.5 175)" />
+        <use href="#3" fill="red" 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="#3" />
         <use href="#s" />
-        <use href="#b3" transform="rotate(180 112.5 175)" />
+        <use href="#3" 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="#4" />
         <use href="#c" />
-        <use href="#b4" transform="rotate(180 112.5 175)" />
+        <use href="#4" 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="#4" fill="red" />
         <use href="#d" />
-        <use href="#r4" transform="rotate(180 112.5 175)" />
+        <use href="#4" fill="red" 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="#4" fill="red" />
         <use href="#h" />
-        <use href="#r4" transform="rotate(180 112.5 175)" />
+        <use href="#4" fill="red" 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="#4" />
         <use href="#s" />
-        <use href="#b4" transform="rotate(180 112.5 175)" />
+        <use href="#4" 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="#5" />
         <use href="#c" />
-        <use href="#b5" transform="rotate(180 112.5 175)" />
+        <use href="#5" 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="#5" fill="red" />
         <use href="#d" />
-        <use href="#r5" transform="rotate(180 112.5 175)" />
+        <use href="#5" fill="red" 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="#5" fill="red" />
         <use href="#h" />
-        <use href="#r5" transform="rotate(180 112.5 175)" />
+        <use href="#5" fill="red" 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="#5" />
         <use href="#s" />
-        <use href="#b5" transform="rotate(180 112.5 175)" />
+        <use href="#5" 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="#6" />
         <use href="#c" />
-        <use href="#b6" transform="rotate(180 112.5 175)" />
+        <use href="#6" 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="#6" fill="red" />
         <use href="#d" />
-        <use href="#r6" transform="rotate(180 112.5 175)" />
+        <use href="#6" fill="red" 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="#6" fill="red" />
         <use href="#h" />
-        <use href="#r6" transform="rotate(180 112.5 175)" />
+        <use href="#6" fill="red" 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="#6" />
         <use href="#s" />
-        <use href="#b6" transform="rotate(180 112.5 175)" />
+        <use href="#6" 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="#7" />
         <use href="#c" />
-        <use href="#b7" transform="rotate(180 112.5 175)" />
+        <use href="#7" 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="#7" fill="red" />
         <use href="#d" />
-        <use href="#r7" transform="rotate(180 112.5 175)" />
+        <use href="#7" fill="red" 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="#7" fill="red" />
         <use href="#h" />
-        <use href="#r7" transform="rotate(180 112.5 175)" />
+        <use href="#7" fill="red" 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="#7" />
         <use href="#s" />
-        <use href="#b7" transform="rotate(180 112.5 175)" />
+        <use href="#7" 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="#8" />
         <use href="#c" />
-        <use href="#b8" transform="rotate(180 112.5 175)" />
+        <use href="#8" 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="#8" fill="red" />
         <use href="#d" />
-        <use href="#r8" transform="rotate(180 112.5 175)" />
+        <use href="#8" fill="red" 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="#8" fill="red" />
         <use href="#h" />
-        <use href="#r8" transform="rotate(180 112.5 175)" />
+        <use href="#8" fill="red" 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="#8" />
         <use href="#s" />
-        <use href="#b8" transform="rotate(180 112.5 175)" />
+        <use href="#8" 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="#9" />
         <use href="#c" />
-        <use href="#b9" transform="rotate(180 112.5 175)" />
+        <use href="#9" 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="#9" fill="red" />
         <use href="#d" />
-        <use href="#r9" transform="rotate(180 112.5 175)" />
+        <use href="#9" fill="red" 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="#9" fill="red" />
         <use href="#h" />
-        <use href="#r9" transform="rotate(180 112.5 175)" />
+        <use href="#9" fill="red" 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="#9" />
         <use href="#s" />
-        <use href="#b9" transform="rotate(180 112.5 175)" />
+        <use href="#9" 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="#T" />
         <use href="#c" />
-        <use href="#bT" transform="rotate(181 112.5 175)" />
+        <use href="#T" 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="#T" fill="red" />
         <use href="#d" />
-        <use href="#rT" transform="rotate(181 112.5 175)" />
+        <use href="#T" fill="red" 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="#T" fill="red" />
         <use href="#h" />
-        <use href="#rT" transform="rotate(181 112.5 175)" />
+        <use href="#T" fill="red" 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="#T" />
         <use href="#s" />
-        <use href="#bT" transform="rotate(181 112.5 175)" />
+        <use href="#T" 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="#J" />
         <use href="#c" />
-        <use href="#bJ" transform="rotate(182 112.5 175)" />
+        <use href="#J" 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="#J" fill="red" />
         <use href="#d" />
-        <use href="#rJ" transform="rotate(182 112.5 175)" />
+        <use href="#J" fill="red" 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="#J" fill="red" />
         <use href="#h" />
-        <use href="#rJ" transform="rotate(182 112.5 175)" />
+        <use href="#J" fill="red" 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="#J" />
         <use href="#s" />
-        <use href="#bJ" transform="rotate(182 112.5 175)" />
+        <use href="#J" 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="#Q" />
         <use href="#c" />
-        <use href="#bQ" transform="rotate(182 112.5 175)" />
+        <use href="#Q" 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="#Q" fill="red" />
         <use href="#d" />
-        <use href="#rQ" transform="rotate(182 112.5 175)" />
+        <use href="#Q" fill="red" 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="#Q" fill="red" />
         <use href="#h" />
-        <use href="#rQ" transform="rotate(182 112.5 175)" />
+        <use href="#Q" fill="red" 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="#Q" />
         <use href="#s" />
-        <use href="#bQ" transform="rotate(182 112.5 175)" />
+        <use href="#Q" 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="#K" />
         <use href="#c" />
-        <use href="#bK" transform="rotate(182 112.5 175)" />
+        <use href="#K" 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="#K" fill="red" />
         <use href="#d" />
-        <use href="#rK" transform="rotate(182 112.5 175)" />
+        <use href="#K" fill="red" 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="#K" fill="red" />
         <use href="#h" />
-        <use href="#rK" transform="rotate(182 112.5 175)" />
+        <use href="#K" fill="red" 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="#K" />
         <use href="#s" />
-        <use href="#bK" transform="rotate(182 112.5 175)" />
+        <use href="#K" 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="#A" />
         <use href="#c" />
-        <use href="#bA" transform="rotate(182 112.5 175)" />
+        <use href="#A" 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="#A" fill="red" />
         <use href="#d" />
-        <use href="#rA" transform="rotate(182 112.5 175)" />
+        <use href="#A" fill="red" 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="#A" fill="red" />
         <use href="#h" />
-        <use href="#rA" transform="rotate(182 112.5 175)" />
+        <use href="#A" fill="red" 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="#A" />
         <use href="#s" />
-        <use href="#bA" transform="rotate(182 112.5 175)" />
+        <use href="#A" transform="rotate(182 112.5 175)" />
         <use href="#s" transform="rotate(180 112.5 175)" />
     </svg>
 </svg>
-- 
2.34.1