<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>