<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background -->
  <rect width="800" height="600" fill="#f8fafc"/>

  <!-- Gradient definitions -->
  <defs>
    <linearGradient id="clockGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="numberGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="arrowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Decorative background elements -->
  <circle cx="150" cy="100" r="60" fill="#e0e7ff" opacity="0.5"/>
  <circle cx="650" cy="500" r="80" fill="#ddd6fe" opacity="0.5"/>
  <circle cx="700" cy="150" r="50" fill="#bfdbfe" opacity="0.5"/>

  <!-- Main clock illustration -->
  <g transform="translate(250, 200)">
    <!-- Clock outer circle -->
    <circle cx="150" cy="150" r="140" fill="white" stroke="url(#clockGradient)" stroke-width="8"/>

    <!-- Clock face background -->
    <circle cx="150" cy="150" r="130" fill="#f8fafc"/>

    <!-- Hour markers -->
    <g>
      <!-- 12 -->
      <rect x="145" y="30" width="10" height="20" fill="#3b82f6" rx="2"/>
      <!-- 3 -->
      <rect x="260" y="145" width="20" height="10" fill="#3b82f6" rx="2"/>
      <!-- 6 -->
      <rect x="145" y="260" width="10" height="20" fill="#3b82f6" rx="2"/>
      <!-- 9 -->
      <rect x="30" y="145" width="20" height="10" fill="#3b82f6" rx="2"/>
    </g>

    <!-- Minute dots -->
    <circle cx="150" cy="60" r="4" fill="#94a3b8"/>
    <circle cx="209" cy="79" r="4" fill="#94a3b8"/>
    <circle cx="240" cy="120" r="4" fill="#94a3b8"/>
    <circle cx="240" cy="180" r="4" fill="#94a3b8"/>
    <circle cx="209" cy="221" r="4" fill="#94a3b8"/>
    <circle cx="150" cy="240" r="4" fill="#94a3b8"/>
    <circle cx="91" cy="221" r="4" fill="#94a3b8"/>
    <circle cx="60" cy="180" r="4" fill="#94a3b8"/>
    <circle cx="60" cy="120" r="4" fill="#94a3b8"/>
    <circle cx="91" cy="79" r="4" fill="#94a3b8"/>

    <!-- Clock hands -->
    <!-- Hour hand (pointing to 10) -->
    <line x1="150" y1="150" x2="110" y2="90" stroke="#1e40af" stroke-width="8" stroke-linecap="round"/>
    <!-- Minute hand (pointing to 2) -->
    <line x1="150" y1="150" x2="200" y2="100" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/>
    <!-- Second hand (pointing to 6) -->
    <line x1="150" y1="150" x2="150" y2="220" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>

    <!-- Center dot -->
    <circle cx="150" cy="150" r="12" fill="#1e40af"/>
    <circle cx="150" cy="150" r="6" fill="white"/>
  </g>

  <!-- Unix timestamp display -->
  <g transform="translate(100, 450)">
    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#numberGradient)" opacity="0.1"/>
    <rect x="0" y="0" width="280" height="80" rx="12" fill="none" stroke="url(#numberGradient)" stroke-width="3"/>
    <text x="140" y="35" text-anchor="middle" font-family="monospace" font-size="14" fill="#6366f1" font-weight="600">TIMESTAMP</text>
    <text x="140" y="60" text-anchor="middle" font-family="monospace" font-size="20" fill="#3b82f6" font-weight="700">1609459200</text>
  </g>

  <!-- Date display -->
  <g transform="translate(420, 450)">
    <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#numberGradient)" opacity="0.1"/>
    <rect x="0" y="0" width="280" height="80" rx="12" fill="none" stroke="url(#numberGradient)" stroke-width="3"/>
    <text x="140" y="35" text-anchor="middle" font-family="monospace" font-size="14" fill="#6366f1" font-weight="600">DATE</text>
    <text x="140" y="60" text-anchor="middle" font-family="monospace" font-size="18" fill="#3b82f6" font-weight="700">2021-01-01 00:00</text>
  </g>

  <!-- Bidirectional arrows -->
  <g transform="translate(380, 475)">
    <!-- Right arrow -->
    <path d="M 0 10 L 20 10 L 15 5 M 20 10 L 15 15" stroke="url(#arrowGradient)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <!-- Left arrow -->
    <path d="M 20 25 L 0 25 L 5 20 M 0 25 L 5 30" stroke="url(#arrowGradient)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Floating number particles -->
  <g opacity="0.6">
    <text x="100" y="150" font-family="monospace" font-size="24" fill="#8b5cf6" font-weight="600">01</text>
    <text x="680" y="250" font-family="monospace" font-size="20" fill="#6366f1" font-weight="600">12</text>
    <text x="120" y="350" font-family="monospace" font-size="18" fill="#3b82f6" font-weight="600">:00</text>
    <text x="650" y="380" font-family="monospace" font-size="22" fill="#8b5cf6" font-weight="600">UTC</text>
  </g>

  <!-- Calendar icon -->
  <g transform="translate(580, 80)">
    <rect x="0" y="10" width="80" height="90" rx="8" fill="white" stroke="#3b82f6" stroke-width="3"/>
    <rect x="0" y="10" width="80" height="25" rx="8" fill="#3b82f6"/>
    <rect x="0" y="27" width="80" height="8" fill="#3b82f6"/>
    <rect x="15" y="0" width="6" height="20" rx="3" fill="#1e40af"/>
    <rect x="59" y="0" width="6" height="20" rx="3" fill="#1e40af"/>
    <!-- Calendar grid -->
    <circle cx="20" cy="55" r="4" fill="#3b82f6"/>
    <circle cx="40" cy="55" r="4" fill="#3b82f6"/>
    <circle cx="60" cy="55" r="4" fill="#3b82f6"/>
    <circle cx="20" cy="75" r="4" fill="#3b82f6"/>
    <circle cx="40" cy="75" r="4" fill="#ef4444"/>
    <circle cx="60" cy="75" r="4" fill="#3b82f6"/>
    <circle cx="20" cy="90" r="4" fill="#3b82f6"/>
    <circle cx="40" cy="90" r="4" fill="#3b82f6"/>
    <circle cx="60" cy="90" r="4" fill="#3b82f6"/>
  </g>

  <!-- Title text -->
  <text x="400" y="80" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="36" fill="#1e293b" font-weight="700">Timestamp Converter</text>
  <text x="400" y="120" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#64748b" font-weight="500">Unix Epoch ⟷ Human Date</text>
</svg>
