From 46fdbd423cbc6599359146e19d70c70f19b9179d Mon Sep 17 00:00:00 2001
From: Eugene Toder <eltoder@gmail.com>
Date: Sat, 2 May 2026 11:08:38 -0400
Subject: [PATCH] Improve stripes for small cards

---
 public/index.html         | 17 +++++++++++++++++
 src/components/SetCard.js |  6 ++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index c2d149e..87ee4c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,6 +63,14 @@
         >
           <rect width="2" height="8" fill="#fff" />
         </pattern>
+        <pattern
+          id="pattern-stripes-small"
+          width="2"
+          height="60"
+          patternUnits="userSpaceOnUse"
+        >
+          <rect width="2" height="24" fill="#fff" />
+        </pattern>
         <mask id="mask-stripes">
           <rect
             x="0"
@@ -72,6 +80,15 @@
             fill="url(#pattern-stripes)"
           />
         </mask>
+        <mask id="mask-stripes-small">
+          <rect
+            x="0"
+            y="0"
+            width="200"
+            height="400"
+            fill="url(#pattern-stripes-small)"
+          />
+        </mask>
         <pattern
           id="pattern-checkers"
           width="100"
diff --git a/src/components/SetCard.js b/src/components/SetCard.js
index ed7f7f0..89e6a20 100644
--- a/src/components/SetCard.js
+++ b/src/components/SetCard.js
@@ -49,13 +49,15 @@ const useStyles = makeStyles((theme) => ({
 
 const SHAPES = ["squiggle", "oval", "diamond", "hourglass"];
 const MASKS = ["", "", "url(#mask-stripes)", "url(#mask-checkers)"];
+const MASKS_SMALL = ["", "", "url(#mask-stripes-small)", "url(#mask-checkers)"];
 
 function Symbol(props) {
   const classes = useStyles();
   const color = props.color;
   const shape = SHAPES[props.shape];
   const shade = props.shade;
-  const width = props.size === "sm" ? 7.1 : 33.6;
+  const width = props.size === "sm" ? 7.3 : 33.6;
+  const masks = props.size === "sm" ? MASKS_SMALL : MASKS;
   return (
     <svg
       className={clsx(classes.symbol, {
@@ -66,7 +68,7 @@ function Symbol(props) {
       viewBox="0 0 200 400"
     >
       {shade !== 1 && (
-        <use href={"#" + shape} fill={color} mask={MASKS[shade]} />
+        <use href={"#" + shape} fill={color} mask={masks[shade]} />
       )}
       <use href={"#" + shape} stroke={color} fill="none" strokeWidth={18} />
     </svg>