statedoku/favicon.png at main · sbbb-git/statedoku · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <!-- Navy rounded background (gives contrast in both light & dark browser tabs) -->
  <rect width="64" height="64" rx="14" fill="#0F2147"/>

  <!-- White grid box -->
  <rect x="6" y="6" width="52" height="52" rx="7" fill="#fff"/>

  <!-- Grid lines (thicker for small-size visibility) -->
  <g stroke="#0F2147" stroke-width="2.5" stroke-linecap="round">
    <line x1="23.3" y1="9" x2="23.3" y2="55"/>
    <line x1="40.7" y1="9" x2="40.7" y2="55"/>
    <line x1="9" y1="23.3" x2="55" y2="23.3"/>
    <line x1="9" y1="40.7" x2="55" y2="40.7"/>
  </g>

  <!-- Top-left cell: US flag (oversized for visibility at small sizes) -->
  <clipPath id="fc">
    <rect x="7.5" y="7.5" width="14.5" height="14.5" rx="5"/>
  </clipPath>
  <g clip-path="url(#fc)">
    <rect x="7.5" y="7.5" width="14.5" height="14.5" fill="#B22234"/>
    <rect x="7.5" y="9.8" width="14.5" height="1.3" fill="#fff"/>
    <rect x="7.5" y="12.3" width="14.5" height="1.3" fill="#fff"/>
    <rect x="7.5" y="14.8" width="14.5" height="1.3" fill="#fff"/>
    <rect x="7.5" y="17.3" width="14.5" height="1.3" fill="#fff"/>
    <rect x="7.5" y="19.8" width="14.5" height="1.3" fill="#fff"/>
    <rect x="7.5" y="7.5" width="6.5" height="7" fill="#3C3B6E"/>
  </g>

  <!-- Center: bold gold star -->
  <polygon points="32,25.5 34.4,30.6 40,31.3 35.8,35.2 36.9,40.8 32,38 27.1,40.8 28.2,35.2 24,31.3 29.6,30.6"
           fill="#F59E0B"/>

  <!-- Bottom-right: red marker dot -->
  <circle cx="49" cy="49" r="4.5" fill="#DC2626"/>
</svg>