← back to Watches

public/watches/seamaster.svg

68 lines

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>
    <linearGradient id="case-grad-sea" 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-sea" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1e3a5f"/>
      <stop offset="100%" style="stop-color:#0d2137"/>
    </linearGradient>
    <linearGradient id="bezel-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#1a1a1a"/>
      <stop offset="100%" style="stop-color:#333"/>
    </linearGradient>
    <filter id="shadow-sea" 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="180" fill="url(#case-grad-sea)" filter="url(#shadow-sea)"/>
  <!-- Dive Bezel -->
  <circle cx="200" cy="200" r="170" fill="url(#bezel-grad)"/>
  <circle cx="200" cy="200" r="168" fill="none" stroke="#444" stroke-width="1"/>
  <!-- Bezel markings -->
  <g fill="#fff" font-family="Arial" font-size="10">
    <text x="200" y="48" text-anchor="middle">60</text>
    <text x="290" y="90" text-anchor="middle">10</text>
    <text x="340" y="160" text-anchor="middle">20</text>
  </g>
  <!-- Bezel pip at 12 -->
  <circle cx="200" cy="42" r="6" fill="#ff6b35"/>
  <!-- Main Dial - Blue -->
  <circle cx="200" cy="200" r="150" fill="url(#dial-grad-sea)"/>
  <!-- Wave pattern -->
  <g stroke="#2a4a6f" stroke-width="1" fill="none" opacity="0.5">
    <path d="M60,200 Q100,190 140,200 T220,200 T300,200 T340,200"/>
    <path d="M60,220 Q100,210 140,220 T220,220 T300,220 T340,220"/>
    <path d="M60,180 Q100,170 140,180 T220,180 T300,180 T340,180"/>
  </g>
  <!-- Hour markers - luminous -->
  <g fill="#e0e0e0">
    <rect x="195" y="60" width="10" height="25" rx="2"/>
    <rect x="195" y="315" width="10" height="25" rx="2"/>
    <rect x="60" y="195" width="25" height="10" rx="2"/>
    <rect x="315" y="195" width="25" height="10" rx="2"/>
    <rect x="270" y="85" width="8" height="18" rx="1" transform="rotate(30 274 94)"/>
    <rect x="315" y="130" width="8" height="18" rx="1" transform="rotate(60 319 139)"/>
  </g>
  <!-- Date window -->
  <rect x="270" y="193" width="30" height="18" rx="2" fill="#fff"/>
  <text x="285" y="206" text-anchor="middle" fill="#000" font-family="Arial" font-size="12" font-weight="bold">25</text>
  <!-- Hands -->
  <polygon points="200,70 195,200 200,210 205,200" fill="#f5f5f5"/>
  <polygon points="200,110 197,200 200,208 203,200" fill="#f5f5f5"/>
  <line x1="200" y1="200" x2="200" y2="85" stroke="#ff6b35" stroke-width="2" stroke-linecap="round"/>
  <!-- Center -->
  <circle cx="200" cy="200" r="10" fill="#333"/>
  <circle cx="200" cy="200" r="5" fill="#c0c0c0"/>
  <!-- OMEGA text -->
  <text x="200" y="160" text-anchor="middle" fill="#f5f5f5" font-family="Arial, sans-serif" font-size="11" font-weight="bold">Ω OMEGA</text>
  <text x="200" y="250" text-anchor="middle" fill="#aaa" font-family="Arial, sans-serif" font-size="8">SEAMASTER</text>
  <text x="200" y="262" text-anchor="middle" fill="#888" font-family="Arial, sans-serif" font-size="7">300M</text>
  <!-- Crown -->
  <rect x="375" y="190" width="20" height="20" rx="3" fill="url(#case-grad-sea)"/>
  <!-- Helium escape valve -->
  <circle cx="55" y="160" r="8" fill="url(#case-grad-sea)"/>
</svg>