feat: integrate Sensei Spook mascot in 4 stances, speech bubbles, and style updates

This commit is contained in:
Ajasra committed 2026-10-28 01:20:01 +08:00
commit e04672db2a
104 files changed
+8262

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 334 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 897 KiB

+40
View File
@@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<defs>
<radialGradient id="ghostGlow" cx="50%" cy="40%" r="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="70%" stop-color="#e0e7ff" />
<stop offset="100%" stop-color="#818cf8" />
</radialGradient>
<linearGradient id="auroraBg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1e1b4b" />
<stop offset="60%" stop-color="#0f172a" />
<stop offset="100%" stop-color="#064e3b" />
</linearGradient>
</defs>
<!-- Background Badge Circle -->
<circle cx="50" cy="50" r="46" fill="url(#auroraBg)" stroke="#38bdf8" stroke-width="2" stroke-dasharray="2 2" />
<!-- Aurora streak in badge -->
<path d="M 10 35 Q 50 20 90 40 Q 50 30 10 35 Z" fill="#4ade80" opacity="0.35" />
<!-- Ghost Body wearing retro hockey helmet / jersey collar -->
<path d="M 50 22 C 36 22 30 35 30 52 C 30 65 24 72 26 78 C 28 82 34 76 38 78 C 42 80 46 75 50 78 C 54 75 58 80 62 78 C 66 76 72 82 74 78 C 76 72 70 65 70 52 C 70 35 64 22 50 22 Z" fill="url(#ghostGlow)" filter="drop-shadow(0 4px 6px rgba(0,0,0,0.4))" />
<!-- Retro Blue & Orange Hockey Stripe on ghost jersey -->
<path d="M 31 54 Q 50 62 69 54" stroke="#0284c7" stroke-width="4" fill="none" stroke-linecap="round" />
<path d="M 31 58 Q 50 66 69 58" stroke="#ea580c" stroke-width="2" fill="none" stroke-linecap="round" />
<!-- Cute ghost eyes and happy mouth -->
<ellipse cx="44" cy="40" rx="3" ry="4" fill="#1e1b4b" />
<ellipse cx="56" cy="40" rx="3" ry="4" fill="#1e1b4b" />
<circle cx="43" cy="38" r="1" fill="#ffffff" />
<circle cx="55" cy="38" r="1" fill="#ffffff" />
<ellipse cx="50" cy="48" rx="2.5" ry="3.5" fill="#1e1b4b" />
<!-- Hockey Stick -->
<path d="M 68 36 L 76 68 L 86 70" stroke="#f59e0b" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path d="M 80 69 L 85 70" stroke="#ffffff" stroke-width="4" stroke-linecap="round" />
<!-- Glowing Ghost Puck -->
<ellipse cx="80" cy="79" rx="5" ry="2.5" fill="#0f172a" stroke="#38bdf8" stroke-width="1" />
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 824 KiB

+54
View File
@@ -0,0 +1,54 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<defs>
<radialGradient id="bgMullet" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4c1d95" />
<stop offset="100%" stop-color="#1e1035" />
</radialGradient>
<linearGradient id="neonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ec4899" />
<stop offset="100%" stop-color="#f59e0b" />
</linearGradient>
<linearGradient id="hairGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#451a03" />
<stop offset="100%" stop-color="#1c1917" />
</linearGradient>
</defs>
<!-- Badge Background -->
<circle cx="50" cy="50" r="46" fill="url(#bgMullet)" stroke="#f43f5e" stroke-width="2" />
<!-- 80s Grid Sun Rays / Retro glow -->
<circle cx="50" cy="48" r="34" fill="none" stroke="url(#neonGlow)" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.6" />
<!-- Flowing Mullet Hair in Back (Party in the back) -->
<path d="M 28 42 C 20 54 22 76 26 84 C 32 86 38 78 40 70 C 44 80 56 80 60 70 C 62 78 68 86 74 84 C 78 76 80 54 72 42 Z" fill="url(#hairGrad)" />
<!-- Person Torso / Shoulders -->
<path d="M 30 84 C 34 76 42 74 50 74 C 58 74 66 76 70 84 C 64 90 36 90 30 84 Z" fill="#3b82f6" />
<!-- Retro Jacket Collar -->
<polygon points="44,74 50,82 46,84" fill="#ec4899" />
<polygon points="56,74 50,82 54,84" fill="#ec4899" />
<!-- Face / Neck -->
<rect x="46" y="60" width="8" height="14" rx="3" fill="#fed7aa" />
<ellipse cx="50" cy="48" rx="14" ry="16" fill="#fed7aa" />
<!-- Facial Features -->
<!-- Happy Eyes -->
<circle cx="45" cy="46" r="2" fill="#1e1b4b" />
<circle cx="55" cy="46" r="2" fill="#1e1b4b" />
<!-- Warm Broad Smile -->
<path d="M 44 54 Q 50 60 56 54" stroke="#9a3412" stroke-width="2" fill="none" stroke-linecap="round" />
<!-- Mullet Hair Front & Top (Business in the front, voluminous feathered top) -->
<path d="M 34 44 C 32 30 40 22 50 22 C 60 22 68 30 66 44 C 64 36 58 32 50 32 C 42 32 36 36 34 44 Z" fill="url(#hairGrad)" />
<!-- Feathered Hair Volume & Bangs -->
<path d="M 36 34 C 40 26 60 26 64 34 C 62 28 56 24 50 24 C 44 24 38 28 36 34 Z" fill="#78350f" opacity="0.8" />
<!-- Sideburns -->
<path d="M 34 42 L 36 50 L 39 46 Z" fill="url(#hairGrad)" />
<path d="M 66 42 L 64 50 L 61 46 Z" fill="url(#hairGrad)" />
<!-- Retro Sparkles -->
<polygon points="22,26 24,22 26,26 24,30" fill="#fde047" />
<polygon points="78,32 79,29 80,32 79,35" fill="#38bdf8" />
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 919 KiB

+43
View File
@@ -0,0 +1,43 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<defs>
<radialGradient id="bgMuttart" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#3b0764" />
<stop offset="80%" stop-color="#1e1b4b" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<linearGradient id="pyramidGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.8" />
<stop offset="50%" stop-color="#38bdf8" stop-opacity="0.6" />
<stop offset="100%" stop-color="#22c55e" stop-opacity="0.4" />
</linearGradient>
</defs>
<!-- Badge Background -->
<circle cx="50" cy="50" r="46" fill="url(#bgMuttart)" stroke="#a855f7" stroke-width="2" />
<!-- Iconic Muttart Conservatory Glass Pyramid Silhouette in background -->
<polygon points="50,22 15,78 85,78" fill="url(#pyramidGlow)" stroke="#c084fc" stroke-width="1.5" />
<line x1="50" y1="22" x2="50" y2="78" stroke="#e9d5ff" stroke-width="1" opacity="0.6" />
<line x1="26" y1="60" x2="74" y2="60" stroke="#e9d5ff" stroke-width="1" opacity="0.6" />
<line x1="38" y1="42" x2="62" y2="42" stroke="#e9d5ff" stroke-width="1" opacity="0.6" />
<!-- Witch Hat -->
<!-- Wide curved brim -->
<ellipse cx="50" cy="56" rx="28" ry="7" fill="#18181b" />
<!-- Hat cone -->
<path d="M 33 55 Q 46 20 62 16 Q 52 38 67 55 Z" fill="#2e1065" />
<!-- Purple Hat Band with gold buckle -->
<path d="M 36 53 Q 50 56 64 53" stroke="#f59e0b" stroke-width="3" fill="none" />
<rect x="47" y="52" width="6" height="5" fill="#fbbf24" rx="1" />
<!-- Bubbling Magic Potion Cauldron below -->
<path d="M 35 68 C 35 62 65 62 65 68 C 72 74 70 86 64 88 C 58 89 42 89 36 88 C 30 86 28 74 35 68 Z" fill="#1e293b" stroke="#334155" stroke-width="2" />
<!-- Glowing green potion surface -->
<ellipse cx="50" cy="68" rx="14" ry="4" fill="#22c55e" />
<!-- Bubbles floating up -->
<circle cx="44" cy="62" r="2.5" fill="#4ade80" opacity="0.8" />
<circle cx="53" cy="59" r="3.5" fill="#86efac" opacity="0.9" />
<circle cx="58" cy="63" r="2" fill="#4ade80" opacity="0.7" />
<!-- Magic sparkle star -->
<path d="M 22 36 L 24 30 L 26 36 L 32 38 L 26 40 L 24 46 L 22 40 L 16 38 Z" fill="#fde047" opacity="0.8" />
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 868 KiB

+49
View File
@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<defs>
<radialGradient id="bgSas" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#14532d" />
<stop offset="100%" stop-color="#052e16" />
</radialGradient>
<pattern id="plaid" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="8" height="8" fill="#b91c1c" />
<rect width="4" height="4" fill="#18181b" />
<rect x="4" y="4" width="4" height="4" fill="#18181b" />
</pattern>
</defs>
<!-- Badge Background -->
<circle cx="50" cy="50" r="46" fill="url(#bgSas)" stroke="#22c55e" stroke-width="2" />
<!-- Pine Tree Silhouettes in background -->
<polygon points="20,70 12,85 28,85" fill="#064e3b" />
<polygon points="80,68 72,85 88,85" fill="#064e3b" />
<!-- Bigfoot / Sasquatch Furry Body (Warm Mocha Clay) -->
<path d="M 50 26 C 32 26 28 42 28 66 C 28 80 34 86 50 86 C 66 86 72 80 72 66 C 72 42 68 26 50 26 Z" fill="#78350f" />
<!-- Sasquatch Fur Texture details / ears -->
<circle cx="28" cy="42" r="5" fill="#78350f" />
<circle cx="72" cy="42" r="5" fill="#78350f" />
<!-- Friendly Face Area -->
<ellipse cx="50" cy="46" rx="14" ry="12" fill="#92400e" />
<!-- Kind Eyes -->
<circle cx="44" cy="44" r="2.5" fill="#1e1b4b" />
<circle cx="56" cy="44" r="2.5" fill="#1e1b4b" />
<circle cx="43" cy="43" r="0.8" fill="#ffffff" />
<circle cx="55" cy="43" r="0.8" fill="#ffffff" />
<!-- Friendly warm smile -->
<path d="M 45 51 Q 50 56 55 51" stroke="#fef3c7" stroke-width="2" fill="none" stroke-linecap="round" />
<!-- Buffalo Plaid Canadian Toque -->
<path d="M 33 30 C 33 16 67 16 67 30 Z" fill="url(#plaid)" />
<rect x="31" y="28" width="38" height="6" rx="3" fill="#18181b" />
<!-- Pom-pom on Toque -->
<circle cx="50" cy="15" r="4" fill="#f87171" />
<!-- Little Pumpkin Candy Bucket in hand -->
<ellipse cx="70" cy="74" rx="8" ry="7" fill="#ea580c" />
<polygon points="68,72 72,72 70,69" fill="#fef08a" />
<!-- Bucket handle -->
<path d="M 64 72 Q 70 65 76 72" stroke="#18181b" stroke-width="1.5" fill="none" />
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 767 KiB

+57
View File
@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<defs>
<radialGradient id="bgVamp" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4c0519" />
<stop offset="60%" stop-color="#1e1b4b" />
<stop offset="100%" stop-color="#09090b" />
</radialGradient>
<linearGradient id="moonGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fef08a" />
<stop offset="100%" stop-color="#f97316" />
</linearGradient>
</defs>
<!-- Badge Background -->
<circle cx="50" cy="50" r="46" fill="url(#bgVamp)" stroke="#e11d48" stroke-width="2" />
<!-- Harvest Moon behind bridge -->
<circle cx="50" cy="38" r="20" fill="url(#moonGrad)" opacity="0.9" />
<!-- High Level Bridge Truss Silhouette -->
<!-- Upper horizontal beam -->
<rect x="15" y="44" width="70" height="3" fill="#18181b" />
<!-- Lower beam -->
<rect x="15" y="52" width="70" height="4" fill="#18181b" />
<!-- Bridge pillars -->
<rect x="25" y="52" width="5" height="32" fill="#18181b" />
<rect x="48" y="52" width="5" height="32" fill="#18181b" />
<rect x="71" y="52" width="5" height="32" fill="#18181b" />
<!-- Truss diagonal criss-crosses -->
<line x1="16" y1="44" x2="26" y2="52" stroke="#18181b" stroke-width="1.5" />
<line x1="26" y1="44" x2="36" y2="52" stroke="#18181b" stroke-width="1.5" />
<line x1="36" y1="44" x2="46" y2="52" stroke="#18181b" stroke-width="1.5" />
<line x1="46" y1="44" x2="56" y2="52" stroke="#18181b" stroke-width="1.5" />
<line x1="56" y1="44" x2="66" y2="52" stroke="#18181b" stroke-width="1.5" />
<line x1="66" y1="44" x2="76" y2="52" stroke="#18181b" stroke-width="1.5" />
<!-- Vampire Silhouette / Red Velvet Cape over Bridge -->
<!-- Velvet cape -->
<path d="M 50 36 C 42 36 34 46 32 60 C 38 65 44 58 50 63 C 56 58 62 65 68 60 C 66 46 58 36 50 36 Z" fill="#9f1239" />
<!-- High vampire collar -->
<polygon points="44,38 38,28 46,34" fill="#be123c" />
<polygon points="56,38 62,28 54,34" fill="#be123c" />
<!-- Friendly vampire face -->
<circle cx="50" cy="35" r="7" fill="#fce7f3" />
<!-- Vampire hair with widow's peak -->
<path d="M 44 32 Q 50 36 56 32 C 57 28 43 28 44 32 Z" fill="#18181b" />
<!-- Little cute eyes & smile with mini fangs -->
<circle cx="48" cy="35" r="0.9" fill="#18181b" />
<circle cx="52" cy="35" r="0.9" fill="#18181b" />
<path d="M 48 38 Q 50 40 52 38" stroke="#be123c" stroke-width="0.8" fill="none" />
<polygon points="48.5,38 49,39.5 49.5,38" fill="#ffffff" />
<polygon points="50.5,38 51,39.5 51.5,38" fill="#ffffff" />
<!-- Little bat flying near moon -->
<path d="M 68 25 Q 73 21 78 26 Q 73 24 68 25 Z" fill="#18181b" />
<path d="M 68 25 Q 63 21 58 26 Q 63 24 68 25 Z" fill="#18181b" />
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" fill="none">
<g filter="drop-shadow(0 8px 16px rgba(0,0,0,0.35))">
<!-- Left Shoe -->
<rect x="25" y="25" width="46" height="100" rx="23" fill="#3a1e0c" />
<path d="M25 48 C25 35, 35 25, 48 25 C61 25, 71 35, 71 48 L71 62 L25 62 Z" fill="#8ca0ff" />
<rect x="36" y="65" width="24" height="2" fill="#d9a566" />
<rect x="36" y="73" width="24" height="2" fill="#d9a566" />
<rect x="36" y="81" width="24" height="2" fill="#d9a566" />
<circle cx="48" cy="105" r="9" fill="#201107" />
<!-- Right Shoe -->
<rect x="89" y="25" width="46" height="100" rx="23" fill="#3a1e0c" />
<path d="M89 48 C89 35, 99 25, 112 25 C125 25, 135 35, 135 48 L135 62 L89 62 Z" fill="#8ca0ff" />
<rect x="100" y="65" width="24" height="2" fill="#d9a566" />
<rect x="100" y="73" width="24" height="2" fill="#d9a566" />
<rect x="100" y="81" width="24" height="2" fill="#d9a566" />
<circle cx="112" cy="105" r="9" fill="#201107" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

+15
View File
@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" fill="none">
<g filter="drop-shadow(0 8px 16px rgba(0,0,0,0.35))">
<!-- Left Shoe -->
<rect x="25" y="25" width="46" height="100" rx="23" fill="#2d160a" />
<path d="M25 48 C25 35, 35 25, 48 25 C61 25, 71 35, 71 48 L71 62 L25 62 Z" fill="#ff85a9" />
<rect x="30" y="68" width="36" height="6" rx="3" fill="#ff85a9" opacity="0.8" />
<circle cx="48" cy="105" r="9" fill="#180c05" />
<!-- Right Shoe -->
<rect x="89" y="25" width="46" height="100" rx="23" fill="#2d160a" />
<path d="M89 48 C89 35, 99 25, 112 25 C125 25, 135 35, 135 48 L135 62 L89 62 Z" fill="#ff85a9" />
<rect x="94" y="68" width="36" height="6" rx="3" fill="#ff85a9" opacity="0.8" />
<circle cx="112" cy="105" r="9" fill="#180c05" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 817 B

+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" fill="none">
<g filter="drop-shadow(0 8px 16px rgba(0,0,0,0.35))">
<!-- Left Shoe -->
<rect x="25" y="25" width="46" height="100" rx="23" fill="#1b1a19" />
<path d="M25 48 C25 35, 35 25, 48 25 C61 25, 71 35, 71 48 L71 62 L25 62 Z" fill="#887e43" />
<rect x="36" y="65" width="24" height="2" fill="#555" />
<rect x="36" y="73" width="24" height="2" fill="#555" />
<rect x="36" y="81" width="24" height="2" fill="#555" />
<circle cx="48" cy="105" r="9" fill="#0d0d0d" />
<!-- Right Shoe -->
<rect x="89" y="25" width="46" height="100" rx="23" fill="#1b1a19" />
<path d="M89 48 C89 35, 99 25, 112 25 C125 25, 135 35, 135 48 L135 62 L89 62 Z" fill="#887e43" />
<rect x="100" y="65" width="24" height="2" fill="#555" />
<rect x="100" y="73" width="24" height="2" fill="#555" />
<rect x="100" y="81" width="24" height="2" fill="#555" />
<circle cx="112" cy="105" r="9" fill="#0d0d0d" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1016 B

+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" fill="none">
<g filter="drop-shadow(0 8px 16px rgba(0,0,0,0.35))">
<!-- Left Shoe -->
<rect x="25" y="25" width="46" height="100" rx="23" fill="#4a2511" />
<path d="M25 48 C25 35, 35 25, 48 25 C61 25, 71 35, 71 48 L71 62 L25 62 Z" fill="#ff7da7" />
<rect x="36" y="65" width="24" height="2" fill="#d9a566" />
<rect x="36" y="73" width="24" height="2" fill="#d9a566" />
<rect x="36" y="81" width="24" height="2" fill="#d9a566" />
<circle cx="48" cy="105" r="9" fill="#301509" />
<!-- Right Shoe -->
<rect x="89" y="25" width="46" height="100" rx="23" fill="#4a2511" />
<path d="M89 48 C89 35, 99 25, 112 25 C125 25, 135 35, 135 48 L135 62 L89 62 Z" fill="#ff7da7" />
<rect x="100" y="65" width="24" height="2" fill="#d9a566" />
<rect x="100" y="73" width="24" height="2" fill="#d9a566" />
<rect x="100" y="81" width="24" height="2" fill="#d9a566" />
<circle cx="112" cy="105" r="9" fill="#301509" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB