← back to Watches

public/watches/railmaster.svg

61 lines

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>
    <linearGradient id="case-grad-rail" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#c0c0c0"/>
      <stop offset="50%" style="stop-color:#e8e8e8"/>
      <stop offset="100%" style="stop-color:#a0a0a0"/>
    </linearGradient>
    <linearGradient id="dial-grad-rail" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1a1a1a"/>
      <stop offset="100%" style="stop-color:#0a0a0a"/>
    </linearGradient>
    <filter id="shadow-rail" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="2" dy="4" stdDeviation="8" flood-opacity="0.4"/>
    </filter>
  </defs>
  <!-- Watch Case -->
  <circle cx="200" cy="200" r="175" fill="url(#case-grad-rail)" filter="url(#shadow-rail)"/>
  <circle cx="200" cy="200" r="165" fill="#222"/>
  <!-- Main Dial -->
  <circle cx="200" cy="200" r="155" fill="url(#dial-grad-rail)"/>
  <!-- Railroad track minute ring -->
  <g stroke="#444" stroke-width="1" fill="none">
    <circle cx="200" cy="200" r="145"/>
    <circle cx="200" cy="200" r="135"/>
  </g>
  <!-- Minute markers -->
  <g fill="#f5f5f5">
    <!-- Generate minute marks around the dial -->
    <rect x="198" y="58" width="4" height="12" transform="rotate(0 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(30 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(60 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(90 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(120 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(150 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(180 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(210 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(240 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(270 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(300 200 200)"/>
    <rect x="198" y="58" width="4" height="12" transform="rotate(330 200 200)"/>
  </g>
  <!-- Arabic numerals -->
  <g fill="#f5f5f5" font-family="Arial, sans-serif" font-size="22" font-weight="bold">
    <text x="200" y="95" text-anchor="middle">12</text>
    <text x="200" y="320" text-anchor="middle">6</text>
    <text x="85" y="208" text-anchor="middle">9</text>
    <text x="315" y="208" text-anchor="middle">3</text>
  </g>
  <!-- Hands -->
  <polygon points="200,85 195,195 200,205 205,195" fill="#f5f5f5"/>
  <polygon points="200,115 197,190 200,200 203,190" fill="#f5f5f5"/>
  <line x1="200" y1="200" x2="200" y2="75" stroke="#ff6b35" stroke-width="2" stroke-linecap="round"/>
  <!-- Center -->
  <circle cx="200" cy="200" r="8" fill="#333"/>
  <circle cx="200" cy="200" r="4" fill="#ff6b35"/>
  <!-- OMEGA text -->
  <text x="200" y="155" text-anchor="middle" fill="#c0c0c0" font-family="Arial, sans-serif" font-size="11" font-weight="bold">Ω OMEGA</text>
  <text x="200" y="250" text-anchor="middle" fill="#888" font-family="Arial, sans-serif" font-size="9">RAILMASTER</text>
  <!-- Crown -->
  <rect x="370" y="190" width="20" height="20" rx="3" fill="url(#case-grad-rail)"/>
</svg>