• Updated 30 Oct, 21:11 UTC
  • Next run 31 Oct, 05:17 UTCNext 31 Oct 05:17
  • Last 7 days: 4 new models · 475 runs7 d: 4 models · 475 runs
Wristwatch that shows the current time

MiMo v2.6 FlashXiaomi

Network offOpen alone (new tab)

Run details

Model
xiaomi/mimo-v2.6-flash
Route
OpenRouter API, one user message
Served by
Relace
Effort
the model's default
Limits
60 min · 131,072 output tokens (the model's limit)
Date
24 Oct 2026
Time
11 min 19 s
Size
27 kB
Tokens
82 in, 50,174 out (28,618 of them thinking)
List price
$0.014 at today's price ($0.14 in / $0.28 out per M)
Paid
$0.014

Raw files: output · meta.json

Exact prompt

Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

27 kB 595 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelia Chronomètre — Mechanical Wristwatch</title>
<style>
  html, body { height: 100%; margin: 0; }
  body {
    background:
      radial-gradient(1300px 900px at 50% 28%, #2c2d33 0%, #1a1b1f 42%, #0c0c0f 78%, #070709 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  body::before {
    content: "";
    position: fixed;
    left: 50%; top: 42%;
    width: 70vmin; height: 70vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 236, 205, 0.13), rgba(255, 236, 205, 0.04) 55%, transparent 75%);
    pointer-events: none;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
  }
  .stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  svg.watch {
    height: 97vh;
    width: auto;
    max-width: 97vw;
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-rendering: geometricPrecision;
  }
</style>
</head>
<body>
<div class="stage">
<svg class="watch" viewBox="0 0 620 1020" xmlns="http://www.w3.org/2000/svg" role="img"
     aria-label="Aurelia mechanical wristwatch showing the current local time with a sweeping seconds hand and date window">
  <title>Aurelia Chronomètre — automatic mechanical wristwatch</title>

  <defs>
    <!-- ============ FILTERS ============ -->
    <filter id="watchShadow" filterUnits="userSpaceOnUse" x="-60" y="-60" width="740" height="1120">
      <feDropShadow dx="0" dy="26" stdDeviation="28" flood-color="#000000" flood-opacity="0.62"/>
      <feDropShadow dx="0" dy="5" stdDeviation="7" flood-color="#000000" flood-opacity="0.40"/>
    </filter>
    <filter id="handShadow" filterUnits="userSpaceOnUse" x="60" y="230" width="500" height="520">
      <feDropShadow dx="4" dy="7" stdDeviation="5" flood-color="#4a3315" flood-opacity="0.42"/>
    </filter>
    <filter id="tinyBlur" filterUnits="userSpaceOnUse" x="400" y="430" width="240" height="140">
      <feGaussianBlur stdDeviation="4"/>
    </filter>

    <!-- ============ CASE / METAL ============ -->
    <linearGradient id="caseFlank" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#f4d3a4"/>
      <stop offset="0.28" stop-color="#dca76a"/>
      <stop offset="0.55" stop-color="#b87e46"/>
      <stop offset="0.82" stop-color="#8d5b2d"/>
      <stop offset="1"    stop-color="#67421f"/>
    </linearGradient>

    <linearGradient id="lugGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#7d5027"/>
      <stop offset="0.16" stop-color="#e7bf88"/>
      <stop offset="0.40" stop-color="#fdeacb"/>
      <stop offset="0.58" stop-color="#d9a86e"/>
      <stop offset="0.82" stop-color="#ac743c"/>
      <stop offset="1"    stop-color="#77491f"/>
    </linearGradient>

    <linearGradient id="crownBody" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#fbe8c7"/>
      <stop offset="0.22" stop-color="#d9a768"/>
      <stop offset="0.5"  stop-color="#a56f38"/>
      <stop offset="0.76" stop-color="#eccb96"/>
      <stop offset="1"    stop-color="#875827"/>
    </linearGradient>
    <linearGradient id="crownTube" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"   stop-color="#6d4520"/>
      <stop offset="0.6" stop-color="#c79457"/>
      <stop offset="1"   stop-color="#7c4f24"/>
    </linearGradient>
    <radialGradient id="gemGrad" cx="34%" cy="28%" r="78%">
      <stop offset="0"   stop-color="#8cc4ff"/>
      <stop offset="0.35" stop-color="#2a63d8"/>
      <stop offset="0.75" stop-color="#12367f"/>
      <stop offset="1"   stop-color="#06123f"/>
    </radialGradient>
    <radialGradient id="capGrad" cx="35%" cy="30%" r="75%">
      <stop offset="0"   stop-color="#fff3d6"/>
      <stop offset="0.5" stop-color="#dcae70"/>
      <stop offset="1"   stop-color="#9a6a33"/>
    </radialGradient>

    <!-- ============ STRAP ============ -->
    <linearGradient id="leatherBase" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#7c5030"/>
      <stop offset="0.42" stop-color="#5e3a21"/>
      <stop offset="0.75" stop-color="#4a2c18"/>
      <stop offset="1"    stop-color="#3a2211"/>
    </linearGradient>
    <linearGradient id="strapShade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#000000" stop-opacity="0.60"/>
      <stop offset="0.14" stop-color="#000000" stop-opacity="0.16"/>
      <stop offset="0.42" stop-color="#ffffff" stop-opacity="0.10"/>
      <stop offset="0.70" stop-color="#000000" stop-opacity="0.10"/>
      <stop offset="1"    stop-color="#000000" stop-opacity="0.60"/>
    </linearGradient>
    <linearGradient id="strapShadeY" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.10"/>
      <stop offset="0.45" stop-color="#000000" stop-opacity="0.00"/>
      <stop offset="1"    stop-color="#000000" stop-opacity="0.42"/>
    </linearGradient>
    <pattern id="gator" patternUnits="userSpaceOnUse" width="48" height="40">
      <g fill="rgba(255,255,255,0.055)" stroke="rgba(0,0,0,0.34)" stroke-width="1.3">
        <rect x="6" y="3" width="36" height="16" rx="7"/>
        <rect x="-9" y="24" width="27" height="14" rx="6"/>
        <rect x="30" y="24" width="27" height="14" rx="6"/>
      </g>
    </pattern>
    <pattern id="grainPat" width="7" height="7" patternUnits="userSpaceOnUse">
      <circle cx="1.4" cy="2.1" r="0.75" fill="#000000" opacity="0.30"/>
      <circle cx="5.2" cy="5.6" r="0.65" fill="#ffffff" opacity="0.22"/>
      <circle cx="6.1" cy="1.2" r="0.5"  fill="#000000" opacity="0.20"/>
    </pattern>

    <clipPath id="strapClip">
      <path d="M210 560 L210 430 C212 320 216 170 222 -12 L398 -12 C404 170 408 320 410 430 L410 560 Z"/>
      <path d="M210 420 L210 720 C212 800 216 875 220 930 Q226 960 310 963 Q394 960 400 930 C404 875 408 800 410 720 L410 420 Z"/>
    </clipPath>

    <!-- ============ DIAL ============ -->
    <radialGradient id="dialFace" cx="45%" cy="36%" r="74%">
      <stop offset="0"    stop-color="#fdfaf3"/>
      <stop offset="0.52" stop-color="#f6f0e4"/>
      <stop offset="1"    stop-color="#e5dbc6"/>
    </radialGradient>
    <radialGradient id="dialVig" gradientUnits="userSpaceOnUse" cx="310" cy="490" r="226">
      <stop offset="0.60" stop-color="#000000" stop-opacity="0"/>
      <stop offset="0.90" stop-color="#4a3a1e" stop-opacity="0.14"/>
      <stop offset="1"    stop-color="#3d2f16" stop-opacity="0.42"/>
    </radialGradient>
    <radialGradient id="dialVig2" gradientUnits="userSpaceOnUse" cx="310" cy="490" r="226">
      <stop offset="0.90" stop-color="#000000" stop-opacity="0"/>
      <stop offset="1"    stop-color="#3d2f16" stop-opacity="0.30"/>
    </radialGradient>
    <linearGradient id="trackGrad" gradientUnits="userSpaceOnUse" x1="150" y1="300" x2="480" y2="690">
      <stop offset="0"    stop-color="#f9f4e9"/>
      <stop offset="0.5"  stop-color="#ece2ce"/>
      <stop offset="1"    stop-color="#ddd1b7"/>
    </linearGradient>
    <linearGradient id="markerFacet" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#fdeecd"/>
      <stop offset="0.20" stop-color="#e3b579"/>
      <stop offset="0.46" stop-color="#a97134"/>
      <stop offset="0.60" stop-color="#f2d49d"/>
      <stop offset="0.84" stop-color="#d2a05f"/>
      <stop offset="1"    stop-color="#8a5a2c"/>
    </linearGradient>
    <linearGradient id="goldText" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0"    stop-color="#f9e6bb"/>
      <stop offset="0.40" stop-color="#c9934f"/>
      <stop offset="0.70" stop-color="#8f6430"/>
      <stop offset="1"    stop-color="#e9c88f"/>
    </linearGradient>
    <linearGradient id="recessShade" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#4a3a1e" stop-opacity="0.42"/>
      <stop offset="0.34" stop-color="#4a3a1e" stop-opacity="0.05"/>
      <stop offset="1"    stop-color="#4a3a1e" stop-opacity="0.14"/>
    </linearGradient>

    <clipPath id="dialClip"><circle cx="310" cy="490" r="226"/></clipPath>

    <!-- ============ HANDS ============ -->
    <linearGradient id="handLight" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#93c3f8"/>
      <stop offset="0.35" stop-color="#4d8ce8"/>
      <stop offset="1"    stop-color="#1c4fb0"/>
    </linearGradient>
    <linearGradient id="handDark" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#2a63c4"/>
      <stop offset="0.45" stop-color="#123a8c"/>
      <stop offset="1"    stop-color="#0a2459"/>
    </linearGradient>
    <linearGradient id="secGrad" gradientUnits="userSpaceOnUse" x1="310" y1="276" x2="310" y2="534">
      <stop offset="0"   stop-color="#7fb2f2"/>
      <stop offset="0.5" stop-color="#1e56b8"/>
      <stop offset="1"   stop-color="#0c2a68"/>
    </linearGradient>

    <!-- ============ CRYSTAL ============ -->
    <radialGradient id="sheenGrad">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.24"/>
      <stop offset="0.5"  stop-color="#ffffff" stop-opacity="0.11"/>
      <stop offset="1"    stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="sheenGrad2">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.09"/>
      <stop offset="1"    stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="saphTint">
      <stop offset="0"    stop-color="#5c86ff" stop-opacity="0.015"/>
      <stop offset="0.70" stop-color="#5c86ff" stop-opacity="0.035"/>
      <stop offset="1"    stop-color="#4a74ee" stop-opacity="0.13"/>
    </radialGradient>
    <radialGradient id="lensGrad">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.03"/>
      <stop offset="0.72" stop-color="#ffffff" stop-opacity="0.05"/>
      <stop offset="1"    stop-color="#ffffff" stop-opacity="0.17"/>
    </radialGradient>
  </defs>

  <!-- =================== STATIC BODY (gets outer shadow) =================== -->
  <g filter="url(#watchShadow)">

    <!-- ---------- STRAP ---------- -->
    <g>
      <g clip-path="url(#strapClip)">
        <rect x="0" y="0" width="620" height="1020" fill="url(#leatherBase)"/>
        <rect x="0" y="0" width="620" height="1020" fill="url(#gator)"/>
        <rect x="0" y="0" width="620" height="1020" fill="url(#strapShade)"/>
        <rect x="0" y="0" width="620" height="1020" fill="url(#strapShadeY)"/>
        <rect x="0" y="0" width="620" height="1020" fill="url(#grainPat)" opacity="0.55"/>
      </g>
      <path d="M210 560 L210 430 C212 320 216 170 222 -12 L398 -12 C404 170 408 320 410 430 L410 560 Z"
            fill="none" stroke="#25130a" stroke-width="3.2" opacity="0.9"/>
      <path d="M210 420 L210 720 C212 800 216 875 220 930 Q226 960 310 963 Q394 960 400 930 C404 875 408 800 410 720 L410 420 Z"
            fill="none" stroke="#25130a" stroke-width="3.2" opacity="0.9"/>

      <!-- saddle stitching -->
      <g stroke="#dcc49b" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="9 9" opacity="0.72">
        <path d="M226 545 C228 430 233 200 238 -6" fill="none"/>
        <path d="M394 545 C392 430 387 200 382 -6" fill="none"/>
        <path d="M226 440 C227 600 231 780 235 916" fill="none"/>
        <path d="M394 440 C393 600 389 780 385 916" fill="none"/>
      </g>
      <g stroke="#3a220f" stroke-width="5" stroke-linecap="round" stroke-dasharray="9 9" opacity="0.35" transform="translate(0.8,1.4)">
        <path d="M226 545 C228 430 233 200 238 -6" fill="none"/>
        <path d="M394 545 C392 430 387 200 382 -6" fill="none"/>
        <path d="M226 440 C227 600 231 780 235 916" fill="none"/>
        <path d="M394 440 C393 600 389 780 385 916" fill="none"/>
      </g>

      <!-- buckle holes -->
      <g>
        <g fill="#0b0a0c">
          <circle cx="310" cy="766" r="6.6"/>
          <circle cx="310" cy="818" r="6.6"/>
          <circle cx="310" cy="870" r="6.6"/>
          <circle cx="310" cy="922" r="6.6"/>
        </g>
        <g fill="none" stroke="#c79a63" stroke-width="1.4" opacity="0.45">
          <path d="M303.4 769 A6.6 6.6 0 0 0 316.6 769"/>
          <path d="M303.4 821 A6.6 6.6 0 0 0 316.6 821"/>
          <path d="M303.4 873 A6.6 6.6 0 0 0 316.6 873"/>
          <path d="M303.4 925 A6.6 6.6 0 0 0 316.6 925"/>
        </g>
        <g fill="none" stroke="#000000" stroke-width="1.2" opacity="0.5">
          <path d="M303.4 763 A6.6 6.6 0 0 1 316.6 763"/>
          <path d="M303.4 815 A6.6 6.6 0 0 1 316.6 815"/>
          <path d="M303.4 867 A6.6 6.6 0 0 1 316.6 867"/>
          <path d="M303.4 919 A6.6 6.6 0 0 1 316.6 919"/>
        </g>
      </g>
    </g>

    <!-- ---------- LUGS ---------- -->
    <g id="lugs">
      <g transform="rotate(-27 310 490)">
        <rect x="288" y="210" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
      </g>
      <g transform="rotate(27 310 490)">
        <rect x="288" y="210" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
      </g>
      <g transform="rotate(27 310 490)">
        <rect x="288" y="598" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
      </g>
      <g transform="rotate(-27 310 490)">
        <rect x="288" y="598" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
      </g>
    </g>

    <!-- ---------- CASE ---------- -->
    <g id="case">
      <circle cx="310" cy="490" r="256" fill="url(#caseFlank)" stroke="#5f3c1b" stroke-width="1.4"/>
      <g id="bezelSegs"></g>
      <!-- polished outer bead -->
      <circle cx="310" cy="490" r="251.5" fill="none" stroke="#f6dcb0" stroke-width="1.6" opacity="0.55"/>
      <circle cx="310" cy="490" r="248.5" fill="none" stroke="#6d451f" stroke-width="1.4" opacity="0.55"/>
      <!-- bezel inner edge -->
      <circle cx="310" cy="490" r="227.2" fill="none" stroke="#6a421d" stroke-width="1.8" opacity="0.7"/>
      <circle cx="310" cy="490" r="225.6" fill="none" stroke="#fbe7c4" stroke-width="1" opacity="0.35"/>
    </g>

    <!-- ---------- DIAL ---------- -->
    <g id="dial">
      <circle cx="310" cy="490" r="226" fill="url(#dialFace)"/>

      <g id="sunburst" clip-path="url(#dialClip)"></g>
      <circle cx="310" cy="490" r="226" fill="url(#dialVig)"/>

      <!-- minute track band (satiné) -->
      <circle cx="310" cy="490" r="214" fill="none" stroke="url(#trackGrad)" stroke-width="24"/>
      <g id="azurage"></g>
      <circle cx="310" cy="490" r="202" fill="none" stroke="#bd9459" stroke-width="1.2" opacity="0.85"/>
      <circle cx="310" cy="490" r="225" fill="none" stroke="#bd9459" stroke-width="1" opacity="0.7"/>
      <circle cx="310" cy="490" r="226" fill="url(#dialVig2)"/>

      <g id="ticks"></g>
      <g id="markers"></g>

      <!-- brand -->
      <text x="312" y="420.5" text-anchor="middle" font-size="25" letter-spacing="7"
            fill="rgba(60,40,15,0.30)">AURELIA</text>
      <text x="310" y="418" text-anchor="middle" font-size="25" letter-spacing="7" fill="url(#goldText)">AURELIA</text>
      <text x="310" y="441" text-anchor="middle" font-size="10.5" letter-spacing="5.5" fill="#7b6b55">GENÈVE</text>

      <!-- date window -->
      <g id="dateWindow">
        <rect x="459" y="475" width="50" height="38" rx="3" fill="#000000" opacity="0.30" filter="url(#tinyBlur)"/>
        <rect x="456" y="471" width="50" height="38" rx="3" fill="#fbf7ef" stroke="#bb8d4d" stroke-width="3.6"/>
        <rect x="458.6" y="473.6" width="44.8" height="32.8" rx="1.6" fill="none" stroke="#6d5636" stroke-width="0.9" opacity="0.75"/>
        <rect x="458.6" y="473.6" width="44.8" height="32.8" fill="url(#recessShade)"/>
        <text id="dateText" x="481.6" y="499.5" text-anchor="middle" font-size="27" font-weight="600"
              letter-spacing="1" fill="#26262b">31</text>
      </g>

      <!-- lower signature -->
      <text x="310" y="573" text-anchor="middle" font-size="11.5" letter-spacing="4.6" fill="#6a5c48">AUTOMATIQUE</text>
      <text x="310" y="594" text-anchor="middle" font-size="9.5" letter-spacing="3.4" fill="#8a7a5e">CHRONOMÈTRE</text>
      <text x="288" y="707" text-anchor="end"   font-size="9" letter-spacing="1.6" fill="#7b6b55">SWISS</text>
      <text x="332" y="707" text-anchor="start" font-size="9" letter-spacing="1.6" fill="#7b6b55">MADE</text>
    </g>

    <!-- ---------- CROWN ---------- -->
    <g id="crown">
      <ellipse cx="574" cy="514" rx="26" ry="8" fill="#000000" opacity="0.40" filter="url(#tinyBlur)"/>
      <rect x="558" y="474" width="20" height="32" rx="4" fill="url(#crownTube)" stroke="#6a4320" stroke-width="0.8"/>
      <rect x="572" y="465" width="32" height="50" rx="8" fill="url(#crownBody)" stroke="#7d5027" stroke-width="1"/>
      <g stroke="#7d4f26" stroke-width="1.5" opacity="0.5">
        <line x1="577" y1="468" x2="577" y2="512"/>
        <line x1="583" y1="467" x2="583" y2="513"/>
        <line x1="589" y1="466" x2="589" y2="514"/>
      </g>
      <g stroke="#ffeac6" stroke-width="1" opacity="0.4">
        <line x1="580" y1="468" x2="580" y2="512"/>
        <line x1="586" y1="467" x2="586" y2="513"/>
      </g>
      <circle cx="604" cy="490" r="15" fill="url(#crownBody)" stroke="#7d5027" stroke-width="1"/>
      <circle cx="606" cy="490" r="13.4" fill="url(#gemGrad)"/>
      <ellipse cx="601" cy="483.5" rx="4.6" ry="3.4" fill="#ffffff" opacity="0.55" transform="rotate(-32 601 483.5)"/>
      <circle cx="611" cy="496" r="3.4" fill="#8cc4ff" opacity="0.35"/>
    </g>
  </g>

  <!-- =================== HANDS =================== -->
  <g id="handStack">
    <!-- hour -->
    <g filter="url(#handShadow)">
      <g id="hourHand" transform="rotate(0 310 490)">
        <polygon points="310,330 299,490 310,516" fill="url(#handLight)"/>
        <polygon points="310,330 321,490 310,516" fill="url(#handDark)"/>
        <polygon points="310,330 321,490 310,516 299,490" fill="none" stroke="#0b1f4e" stroke-width="1"/>
        <line x1="310" y1="332" x2="310" y2="513" stroke="#a9cdfb" stroke-width="1.1" opacity="0.65"/>
      </g>
    </g>
    <!-- minute -->
    <g filter="url(#handShadow)">
      <g id="minuteHand" transform="rotate(0 310 490)">
        <polygon points="310,285 301,490 310,518" fill="url(#handLight)"/>
        <polygon points="310,285 319,490 310,518" fill="url(#handDark)"/>
        <polygon points="310,285 319,490 310,518 301,490" fill="none" stroke="#0b1f4e" stroke-width="1"/>
        <line x1="310" y1="287" x2="310" y2="516" stroke="#a9cdfb" stroke-width="1" opacity="0.65"/>
      </g>
    </g>
    <!-- seconds (sweeping) -->
    <g filter="url(#handShadow)">
      <g id="secHand" transform="rotate(0 310 490)">
        <line x1="310" y1="276" x2="310" y2="521" stroke="url(#secGrad)" stroke-width="2.8" stroke-linecap="round"/>
        <circle cx="310" cy="524" r="7.6" fill="none" stroke="url(#secGrad)" stroke-width="2.8"/>
        <circle cx="310" cy="524" r="2.2" fill="#fbf7ef" opacity="0.85"/>
      </g>
    </g>
    <!-- centre cap -->
    <g filter="url(#handShadow)">
      <circle cx="310" cy="490" r="9.6" fill="url(#capGrad)" stroke="#7d5027" stroke-width="0.8"/>
      <circle cx="310" cy="490" r="4.6" fill="#8a5a2c"/>
      <ellipse cx="306.6" cy="486.6" rx="3" ry="2.1" fill="#ffffff" opacity="0.6" transform="rotate(-30 306.6 486.6)"/>
    </g>
  </g>

  <!-- =================== CRYSTAL =================== -->
  <g id="crystal" clip-path="url(#dialClip)">
    <ellipse cx="228" cy="348" rx="188" ry="106" transform="rotate(-38 228 348)" fill="url(#sheenGrad)"/>
    <path d="M120 476 Q196 334 332 252 L354 278 Q228 356 152 496 Z" fill="#ffffff" opacity="0.10"/>
    <ellipse cx="430" cy="624" rx="126" ry="72" transform="rotate(-36 430 624)" fill="url(#sheenGrad2)"/>
    <path d="M470 348 Q520 420 522 512 L498 512 Q496 424 452 366 Z" fill="#ffffff" opacity="0.05"/>
  </g>
  <g id="crystalEdge">
    <circle cx="310" cy="490" r="226" fill="url(#saphTint)"/>
    <circle cx="310" cy="490" r="226" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.16"/>
    <path d="M114 377 A226 226 0 0 1 233 278" fill="none" stroke="#ffffff" stroke-width="7"
          opacity="0.22" stroke-linecap="round"/>
    <path d="M418 664 A226 226 0 0 1 336 714" fill="none" stroke="#ffffff" stroke-width="5"
          opacity="0.10" stroke-linecap="round"/>
    <!-- cyclops magnifier over the date -->
    <circle cx="481" cy="490" r="42" fill="url(#lensGrad)" stroke="rgba(255,255,255,0.22)" stroke-width="1.3"/>
    <path d="M452 462 A42 42 0 0 1 505 462" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.35" stroke-linecap="round"/>
    <path d="M456 520 A42 42 0 0 0 508 519" fill="none" stroke="#000000" stroke-width="3" opacity="0.10" stroke-linecap="round"/>
  </g>
</svg>
</div>

<script>
(function () {
  "use strict";
  var NS = "http://www.w3.org/2000/svg";
  var CX = 310, CY = 490, RD = 226;

  function add(tag, attrs, parent) {
    var e = document.createElementNS(NS, tag);
    for (var k in attrs) { if (Object.prototype.hasOwnProperty.call(attrs, k)) e.setAttribute(k, attrs[k]); }
    parent.appendChild(e);
    return e;
  }

  /* ---------- polished rose-gold conic colouring ---------- */
  function metal(t) {
    var k1 = Math.cos(t + 2.356);           // key light : upper-left
    var k2 = Math.cos(t - 0.90);            // fill light: lower-right
    var f = Math.pow(0.5 + 0.5 * k1, 1.5);
    var g = Math.pow(0.5 + 0.5 * k2, 3) * 0.42;
    var spec = Math.pow(Math.max(0, k1), 8);
    var base = [236, 178, 120], out = [];
    for (var i = 0; i < 3; i++) {
      var v = base[i] * (0.32 + 0.76 * f) + g * 44 + spec * (255 - base[i]) * 0.85;
      out.push(Math.max(0, Math.min(255, Math.round(v))));
    }
    return "rgb(" + out.join(",") + ")";
  }

  /* ---------- bezel: 112 milled segments ---------- */
  (function () {
    var host = document.getElementById("bezelSegs");
    var N = 112, r0 = 226.5, r1 = 250;
    for (var i = 0; i < N; i++) {
      var a0 = i / N * Math.PI * 2;
      var a1 = (i + 1) / N * Math.PI * 2 + 0.005;
      var pts = [
        [CX + Math.cos(a0) * r0, CY + Math.sin(a0) * r0],
        [CX + Math.cos(a1) * r0, CY + Math.sin(a1) * r0],
        [CX + Math.cos(a1) * r1, CY + Math.sin(a1) * r1],
        [CX + Math.cos(a0) * r1, CY + Math.sin(a0) * r1]
      ];
      var d = "M";
      for (var p = 0; p < 4; p++) {
        d += (p ? "L" : "") + pts[p][0].toFixed(2) + " " + pts[p][1].toFixed(2);
      }
      add("path", { d: d + "Z", fill: metal((a0 + a1) / 2) }, host);
    }
  })();

  /* ---------- sunburst guilloché ---------- */
  (function () {
    var host = document.getElementById("sunburst");
    for (var i = 0; i < 240; i++) {
      var a = i / 240 * Math.PI * 2;
      add("line", {
        x1: (CX + Math.cos(a) * 3).toFixed(2),
        y1: (CY + Math.sin(a) * 3).toFixed(2),
        x2: (CX + Math.cos(a) * (RD - 4)).toFixed(2),
        y2: (CY + Math.sin(a) * (RD - 4)).toFixed(2),
        stroke: (i % 2) ? "rgba(255,255,255,0.45)" : "rgba(112,90,56,0.22)",
        "stroke-width": 1.5
      }, host);
    }
  })();

  /* ---------- azurage rings on the minute track ---------- */
  (function () {
    var host = document.getElementById("azurage");
    for (var r = 204; r <= 224; r += 2) {
      add("circle", { cx: CX, cy: CY, r: r, fill: "none",
        stroke: "rgba(90,70,40,0.075)", "stroke-width": 0.9 }, host);
    }
  })();

  /* ---------- 1/5-second railway track ---------- */
  (function () {
    var host = document.getElementById("ticks");
    for (var i = 0; i < 300; i++) {
      var a = i / 300 * Math.PI * 2 - Math.PI / 2;
      var major = (i % 5 === 0);
      var ri = major ? 208 : 215, ro = 221;
      add("line", {
        x1: (CX + Math.cos(a) * ri).toFixed(2),
        y1: (CY + Math.sin(a) * ri).toFixed(2),
        x2: (CX + Math.cos(a) * ro).toFixed(2),
        y2: (CY + Math.sin(a) * ro).toFixed(2),
        stroke: major ? "#4b3c2a" : "#7a6a52",
        "stroke-width": major ? 2.2 : 1,
        opacity: major ? 0.9 : 0.75
      }, host);
    }
  })();

  /* ---------- applied solid-gold baton indices ---------- */
  (function () {
    var host = document.getElementById("markers");
    var topY = CY - 198, hgt = 34;

    function baton(x, y, w, h, parent) {
      add("rect", { x: x + 2.5, y: y + 3, width: w, height: h, rx: 2, fill: "#000000", opacity: 0.22 }, parent);
      add("rect", { x: x, y: y, width: w, height: h, rx: 2, fill: "url(#markerFacet)" }, parent);
      add("line", { x1: x + w * 0.5, y1: y + 1.5, x2: x + w * 0.5, y2: y + h - 1.5,
        stroke: "#fff6e2", "stroke-width": 0.9, opacity: 0.55 }, parent);
      add("rect", { x: x, y: y, width: w, height: h, rx: 2, fill: "none",
        stroke: "#9a6a33", "stroke-width": 0.8, opacity: 0.75 }, parent);
    }

    for (var hr = 0; hr < 12; hr++) {
      if (hr === 3) continue;                                  /* date aperture at 3 */
      var g = add("g", { transform: "rotate(" + (hr * 30) + " " + CX + " " + CY + ")" }, host);
      if (hr === 0) {                                          /* double index at 12 */
        baton(CX - 16, topY, 10, hgt, g);
        baton(CX + 6,  topY, 10, hgt, g);
      } else {
        baton(CX - 5.5, topY, 11, hgt, g);
      }
    }
  })();

  /* ---------- movement: sweeping 28,800 A/h seconds ---------- */
  var hourHand   = document.getElementById("hourHand");
  var minuteHand = document.getElementById("minuteHand");
  var secHand    = document.getElementById("secHand");
  var dateText   = document.getElementById("dateText");
  var lastDate   = -1;

  function pad(n) { return n < 10 ? "0" + n : "" + n; }

  function frame() {
    var now  = new Date();
    var ms   = now.getMilliseconds();
    /* 8 beats per second -> authentic mechanical sweep, not a quartz tick */
    var sec  = now.getSeconds() + (Math.floor(ms / 125) * 125) / 1000;
    var min  = now.getMinutes() + sec / 60;
    var hr   = (now.getHours() % 12) + min / 60;

    secHand.setAttribute("transform",   "rotate(" + (sec * 6).toFixed(3)  + " 310 490)");
    minuteHand.setAttribute("transform","rotate(" + (min * 6).toFixed(3)  + " 310 490)");
    hourHand.setAttribute("transform",  "rotate(" + (hr * 30).toFixed(3)  + " 310 490)");

    var d = now.getDate();
    if (d !== lastDate) { dateText.textContent = pad(d); lastDate = d; }

    requestAnimationFrame(frame);
  }

  /* first paint immediately (no flash at 12:00) */
  (function () {
    var now = new Date();
    var sec = now.getSeconds() + now.getMilliseconds() / 1000;
    var min = now.getMinutes() + sec / 60;
    var hr  = (now.getHours() % 12) + min / 60;
    secHand.setAttribute("transform",    "rotate(" + (sec * 6) + " 310 490)");
    minuteHand.setAttribute("transform", "rotate(" + (min * 6) + " 310 490)");
    hourHand.setAttribute("transform",   "rotate(" + (hr * 30) + " 310 490)");
    dateText.textContent = pad(now.getDate());
    lastDate = now.getDate();
  })();

  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Compare with

MiMo v2.6 Flash: other attempts