Initial commit: game development
This commit is contained in:
commit
176d7cc300
5 files changed
+1084
No files matched your search
@@ -0,0 +1,92 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="780" viewBox="0 0 420 780" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#0d0f24"/>
|
||||
<stop offset="1" stop-color="#1c1140"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#22d3ee"/>
|
||||
<stop offset="1" stop-color="#f472b6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="btnGrad" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#22d3ee"/>
|
||||
<stop offset="1" stop-color="#f472b6"/>
|
||||
</linearGradient>
|
||||
<filter id="blob" x="-80%" y="-80%" width="260%" height="260%">
|
||||
<feGaussianBlur stdDeviation="55"/>
|
||||
</filter>
|
||||
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
||||
<feGaussianBlur stdDeviation="5" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- background -->
|
||||
<rect width="420" height="780" fill="url(#bgGrad)"/>
|
||||
<circle cx="70" cy="170" r="130" fill="#22d3ee" opacity="0.22" filter="url(#blob)"/>
|
||||
<circle cx="350" cy="580" r="150" fill="#f472b6" opacity="0.18" filter="url(#blob)"/>
|
||||
|
||||
<!-- title -->
|
||||
<text x="210" y="66" text-anchor="middle" font-size="30" font-weight="700" fill="url(#titleGrad)">Tic-Tac-Toe</text>
|
||||
|
||||
<!-- scoreboard -->
|
||||
<g>
|
||||
<rect x="18" y="96" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||
<text x="78" y="120" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">YOU (X)</text>
|
||||
<text x="78" y="148" text-anchor="middle" font-size="22" font-weight="700" fill="#22d3ee">2</text>
|
||||
|
||||
<rect x="150" y="96" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||
<text x="210" y="120" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">CPU (O)</text>
|
||||
<text x="210" y="148" text-anchor="middle" font-size="22" font-weight="700" fill="#f472b6">1</text>
|
||||
|
||||
<rect x="282" y="96" width="120" height="64" rx="16" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||
<text x="342" y="120" text-anchor="middle" font-size="11" letter-spacing="1.5" fill="#ffffff" opacity="0.55">DRAWS</text>
|
||||
<text x="342" y="148" text-anchor="middle" font-size="22" font-weight="700" fill="#ffffff">1</text>
|
||||
</g>
|
||||
|
||||
<!-- status -->
|
||||
<text x="210" y="200" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.65">CPU is thinking...</text>
|
||||
|
||||
<!-- board panel -->
|
||||
<rect x="40" y="220" width="340" height="340" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.12"/>
|
||||
|
||||
<!-- cells -->
|
||||
<g fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.10">
|
||||
<rect x="54" y="234" width="96" height="96" rx="16"/>
|
||||
<rect x="162" y="234" width="96" height="96" rx="16"/>
|
||||
<rect x="270" y="234" width="96" height="96" rx="16"/>
|
||||
<rect x="54" y="342" width="96" height="96" rx="16"/>
|
||||
<rect x="162" y="342" width="96" height="96" rx="16"/>
|
||||
<rect x="270" y="342" width="96" height="96" rx="16"/>
|
||||
<rect x="54" y="450" width="96" height="96" rx="16"/>
|
||||
<rect x="162" y="450" width="96" height="96" rx="16"/>
|
||||
<rect x="270" y="450" width="96" height="96" rx="16"/>
|
||||
</g>
|
||||
|
||||
<!-- marks -->
|
||||
<g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
|
||||
<line x1="80" y1="260" x2="124" y2="304"/>
|
||||
<line x1="124" y1="260" x2="80" y2="304"/>
|
||||
</g>
|
||||
<circle cx="210" cy="282" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
|
||||
<circle cx="102" cy="390" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
|
||||
<g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
|
||||
<line x1="188" y1="368" x2="232" y2="412"/>
|
||||
<line x1="232" y1="368" x2="188" y2="412"/>
|
||||
</g>
|
||||
<g filter="url(#glow)" stroke="#22d3ee" stroke-width="7" stroke-linecap="round">
|
||||
<line x1="296" y1="368" x2="340" y2="412"/>
|
||||
<line x1="340" y1="368" x2="296" y2="412"/>
|
||||
</g>
|
||||
<circle cx="210" cy="498" r="24" fill="none" stroke="#f472b6" stroke-width="7" filter="url(#glow)"/>
|
||||
|
||||
<!-- buttons -->
|
||||
<rect x="60" y="600" width="300" height="54" rx="27" fill="url(#btnGrad)"/>
|
||||
<text x="210" y="633" text-anchor="middle" font-size="16" font-weight="700" fill="#0d1025">New Game</text>
|
||||
|
||||
<rect x="60" y="668" width="300" height="48" rx="24" fill="#ffffff" fill-opacity="0.05" stroke="#ffffff" stroke-opacity="0.18"/>
|
||||
<text x="210" y="697" text-anchor="middle" font-size="14" fill="#ffffff" opacity="0.7">Reset Scores</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
Reference in new issue
Block a user