tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

grid and style adjustments - new rarity component for rarity symbol svgs

Browse Source
This commit is contained in:
zach
2026-02-16 15:54:07 -05:00
parent 32df33f29e
commit e4e4e6607a
22 changed files with 322 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/svg/rarity/amazing_rare.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_294_2522)">
<path d="M4.57699 12.3106C5.86593 11.5102 7.33275 12.6212 7.33275 12.6212C7.33275 12.6212 7.02213 11.5102 7.77744 11.1544L5.82213 6.7991L2.04425 11.3774C2.04425 11.3774 3.91062 11.0217 4.57699 12.3106Z" fill="#8F4A9B"/>
<path d="M5.82211 6.80044L10.8889 8.31106C10.8889 8.31106 10.5332 7.2438 11.8221 6.80044C11.8221 6.80044 9.8668 5.64557 12 3.73407L5.82211 5.64557V6.80044Z" fill="#06A35B"/>
<path d="M5.82211 5.64425L12 3.73274C12 3.73274 9.91061 4.17743 9.68893 2.57788C9.68893 2.57788 8.22211 2.44513 8.48893 0L5.82211 5.64425Z" fill="#F1E836"/>
<path d="M5.82211 5.64425L8.48892 0C8.48892 0 7.02211 2.22212 5.82211 1.33274C5.82211 1.33274 5.33361 3.15531 3.02255 0.75531L4.91149 7.28894L5.82211 6.80044V5.64557V5.64425Z" fill="#DF071C"/>
<path d="M3.02257 0.75531C3.02257 0.75531 3.68894 2.71062 1.06726 3.64381C1.06726 3.64381 2.08938 5.55531 0 5.64425L5.64292 8.08672L6.57743 6.4885L4.88363 3.64381L3.02257 0.75531Z" fill="#039ADB"/>
<path d="M0 5.64426C0 5.64426 2.35487 7.77744 0.44469 8.97744C0.44469 8.97744 2.84469 9.06638 2.04425 11.3774L5.24469 7.51063L0 5.64426Z" fill="#DB4790"/>
<path d="M5.82212 5.01903L4.9115 7.39115L6.08628 7.38717L7.77743 11.1544C7.77743 11.1544 9.33318 10.8876 9.99955 10.9765C9.99955 10.9765 9.37699 9.33186 11.6442 9.4208L10.8889 8.30974L6.93849 7.13097L5.82212 5.0177V5.01903Z" fill="#EA4A0B"/>
<path d="M4.70176 8.25L4.1761 9.47257H2.60574L5.29512 3.81107H6.6876L9.36902 9.47124H7.78141L7.21327 8.24868H4.70176V8.25ZM6.26282 6.22169C6.1022 5.8739 6.02521 5.69602 5.91504 5.43186C5.80486 5.70399 5.77964 5.77169 5.5845 6.23761L5.2115 7.1031H6.6876L6.26282 6.22036V6.22169Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_294_2522">
<rect width="12" height="12.6212" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
src/svg/rarity/common.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="4.5" fill="#1F232D" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 142 B

4
src/svg/rarity/double_rare.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.00021 0.579583L4.92688 2.51822L4.98809 2.64627L5.12942 2.65934L7.37109 2.86666L5.70607 4.23373L5.58558 4.33266L5.6214 4.48439L6.10131 6.51723L4.11848 5.45301L4.00027 5.38956L3.88205 5.453L1.8988 6.51722L2.3791 4.48444L2.41496 4.33266L2.29442 4.23371L0.629014 2.86665L2.87059 2.65934L3.01188 2.64627L3.0731 2.51826L4.00021 0.579583Z" fill="#1F232D" stroke="white" stroke-width="0.5"/>
<path d="M12.0002 3.57958L12.9269 5.51822L12.9881 5.64627L13.1294 5.65934L15.3711 5.86666L13.7061 7.23373L13.5856 7.33266L13.6214 7.48439L14.1013 9.51723L12.1185 8.45301L12.0003 8.38956L11.882 8.453L9.8988 9.51722L10.3791 7.48444L10.415 7.33266L10.2944 7.23371L8.62901 5.86665L10.8706 5.65934L11.0119 5.64627L11.0731 5.51826L12.0002 3.57958Z" fill="#1F232D" stroke="white" stroke-width="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

3
src/svg/rarity/illustration_rare.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#FDC401" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

16
src/svg/rarity/mega_attack_rare.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.00026 0L5.15244 2.4104L8 2.67376L5.86471 4.42695L6.47215 7L4.00026 5.67329L1.52785 7L2.1358 4.42695L0 2.67376L2.84756 2.4104L4.00026 0Z" fill="url(#paint0_linear_5284_2043)"/>
<path d="M12.0003 3L13.1524 5.4104L16 5.67376L13.8647 7.42695L14.4722 10L12.0003 8.67329L9.52785 10L10.1358 7.42695L8 5.67376L10.8476 5.4104L12.0003 3Z" fill="url(#paint1_linear_5284_2043)"/>
<defs>
<linearGradient id="paint0_linear_5284_2043" x1="0" y1="0" x2="6.16262" y2="7.32472" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#D83A92"/>
<stop offset="0.505208" stop-color="#F2A1C6"/>
<stop offset="0.822917" stop-color="#D83A92"/>
</linearGradient>
<linearGradient id="paint1_linear_5284_2043" x1="8" y1="3" x2="14.1626" y2="10.3247" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#2A9568"/>
<stop offset="0.505208" stop-color="#86D499"/>
<stop offset="0.822917" stop-color="#2A9568"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
src/svg/rarity/mega_hyper_rare.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6364 7.38298L12 1L8.36364 7.38298L2 11.2128L8.36364 14.617L12 21L15.6364 14.617L22 11.2128L15.6364 7.38298Z" fill="#FFFF19" stroke="black"/>
<path d="M13.8182 9.19149L12 6L10.1818 9.19149L7 11.1064L10.1818 12.8085L12 16L13.8182 12.8085L17 11.1064L13.8182 9.19149Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 373 B

19
src/svg/rarity/promo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

3
src/svg/rarity/rare.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#1F232D" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

11
src/svg/rarity/rare_holo.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2571)"/>
<path d="M17 11V2H18.6537V5.6123H21.3497V2H23V11H21.3497V7.3833H18.6537V11H17Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_295_2571" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 656 B

10
src/svg/rarity/rare_holo_lv.x.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2611)"/>
<defs>
<linearGradient id="paint0_linear_295_2611" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

11
src/svg/rarity/rare_holo_vmax.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg viewBox="0 0 24 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2573)"/>
<path d="M19.0971 3L20.4635 5.84326H20.5219L21.9029 3H23.9269L21.6691 7.5L24 12H21.9248L20.5219 9.12598H20.4635L19.0605 12H17L19.3199 7.5L17.0585 3H19.0971Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_295_2573" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

11
src/svg/rarity/rare_ultra.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg viewBox="0 0 23 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00045 0L9.01677 4.47646L14 4.96555L10.2632 8.22148L11.3263 13L7.00045 10.5361L2.67373 13L3.73765 8.22148L0 4.96555L4.98323 4.47646L7.00045 0Z" fill="url(#paint0_linear_295_2574)"/>
<path d="M21.2897 3H23V8.7324C23 9.39489 22.8742 9.97204 22.6226 10.4638C22.371 10.9527 22.0202 11.3317 21.5701 11.6008C21.12 11.8669 20.5972 12 20.0017 12C19.3993 12 18.8731 11.8669 18.423 11.6008C17.9729 11.3317 17.6232 10.9527 17.3739 10.4638C17.1246 9.97204 17 9.39489 17 8.7324V3H18.7138V8.54581C18.7138 8.85246 18.7669 9.12584 18.8731 9.36596C18.9815 9.60608 19.1327 9.79412 19.3266 9.93009C19.5205 10.0661 19.7455 10.134 20.0017 10.134C20.2579 10.134 20.4818 10.0661 20.6734 9.93009C20.8673 9.79412 21.0185 9.60608 21.1269 9.36596C21.2354 9.12584 21.2897 8.85246 21.2897 8.54581V3Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_295_2574" x1="0" y1="0" x2="11.5419" y2="12.9269" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
src/svg/rarity/special_illustration_rare.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.00021 0.579583L4.92688 2.51822L4.98809 2.64627L5.12942 2.65934L7.37109 2.86666L5.70607 4.23373L5.58558 4.33266L5.6214 4.48439L6.10131 6.51723L4.11848 5.45301L4.00027 5.38956L3.88205 5.453L1.8988 6.51722L2.3791 4.48444L2.41496 4.33266L2.29442 4.23371L0.629014 2.86665L2.87059 2.65934L3.01188 2.64627L3.0731 2.51826L4.00021 0.579583Z" fill="#FDC401" stroke="white" stroke-width="0.5"/>
<path d="M12.0002 3.57958L12.9269 5.51822L12.9881 5.64627L13.1294 5.65934L15.3711 5.86666L13.7061 7.23373L13.5856 7.33266L13.6214 7.48439L14.1013 9.51723L12.1185 8.45301L12.0003 8.38956L11.882 8.453L9.8988 9.51722L10.3791 7.48444L10.415 7.33266L10.2944 7.23371L8.62901 5.86665L10.8706 5.65934L11.0119 5.64627L11.0731 5.51826L12.0002 3.57958Z" fill="#FDC401" stroke="white" stroke-width="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

16
src/svg/rarity/ultra_rare.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.00026 0L5.15244 2.4104L8 2.67376L5.86471 4.42695L6.47215 7L4.00026 5.67329L1.52785 7L2.1358 4.42695L0 2.67376L2.84756 2.4104L4.00026 0Z" fill="url(#paint0_linear_294_2531)"/>
<path d="M12.0003 3L13.1524 5.4104L16 5.67376L13.8647 7.42695L14.4722 10L12.0003 8.67329L9.52785 10L10.1358 7.42695L8 5.67376L10.8476 5.4104L12.0003 3Z" fill="url(#paint1_linear_294_2531)"/>
<defs>
<linearGradient id="paint0_linear_294_2531" x1="0" y1="0" x2="6.16262" y2="7.32472" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
<linearGradient id="paint1_linear_294_2531" x1="8" y1="3" x2="14.1626" y2="10.3247" gradientUnits="userSpaceOnUse">
<stop offset="0.203125" stop-color="#BFBFBF"/>
<stop offset="0.505208" stop-color="white"/>
<stop offset="0.822917" stop-color="#798194"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1019 B

3
src/svg/rarity/uncommon.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7.07104" y="0.707107" width="9" height="9" transform="rotate(45 7.07104 0.707107)" fill="#1F232D" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 204 B