GRADIENT
.ART
css
Sign In
<div id="root">
<div class="overhead-softbox ga-shared"></div>
<div class="atelier-04-complete-timepiece ga-shared">
<div class="layer-01-hand-stitched-alligator-strap ga-shared">
<div class="deep-forest-leather ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(327px, 120px) scale(calc(max(0, 146) / max(0.000001, 800)), calc(max(0, 560) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(18 40 42 / 1)" stroke="rgb(66 91 82 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<rect x="10.5" y="10.5" width="179" height="179" rx="24"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="leather-scale-pattern ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="pattern">
<pattern id="ga-svg-32-content" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(0 100 100)">
<g fill="rgb(157 180 155 / 0.16)">
<path d="M0 0H20V1H1V20H0Z"/>
</g>
</pattern>
<rect width="200" height="200" fill="none"/>
<rect width="200" height="200" fill="url(#ga-svg-32-content)"/>
</svg>
</div>
<div class="left-saddle-stitch ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(181 171 128 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M86 37.5 L86 162.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="right-saddle-stitch ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(181 171 128 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M114 37.5 L114 162.5"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="layer-02-brushed-titanium-case ga-shared">
<div class="upper-sculpted-lugs ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(289px, 227px) scale(calc(max(0, 222) / max(0.000001, 800)), calc(max(0, 111) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(124 147 144 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<rect x="10" y="10" width="180" height="180" rx="26"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="lower-sculpted-lugs ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(289px, 462px) scale(calc(max(0, 222) / max(0.000001, 800)), calc(max(0, 111) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(124 147 144 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<rect x="10" y="10" width="180" height="180" rx="26"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="fluted-winding-crown ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(553px, 374px) scale(calc(max(0, 42) / max(0.000001, 800)), calc(max(0, 52) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(217 183 120 / 1)" stroke="rgb(240 222 179 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<rect x="11" y="11" width="178" height="178" rx="12"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="crown-machining ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="pattern">
<pattern id="ga-svg-26-content" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(0 100 100)">
<g fill="rgb(101 87 61 / 1)">
<rect width="8" height="20"/>
</g>
</pattern>
<rect width="200" height="200" fill="none"/>
<rect width="200" height="200" fill="url(#ga-svg-26-content)"/>
</svg>
</div>
<div class="recessed-movement-chamber ga-shared"></div>
<div class="caliber-gear-1 ga-shared">
<div class="cut-brass-wheel-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(337px, 370px) scale(calc(max(0, 88) / max(0.000001, 800)), calc(max(0, 88) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(217 183 120 / 1)" stroke="rgb(117 96 61 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<polygon points="100,11 110.2228,22.35 123.0349,14.0326 129.9718,27.6418 144.5,22.9237 147.6782,37.8646 162.9325,37.0675 162.1354,52.3218 177.0763,55.5 172.3582,70.0282 185.9674,76.9651 177.65,89.7772 189,100 177.65,110.2228 185.9674,123.0349 172.3582,129.9718 177.0763,144.5 162.1354,147.6782 162.9325,162.9325 147.6782,162.1354 144.5,177.0763 129.9718,172.3582 123.0349,185.9674 110.2228,177.65 100,189 89.7772,177.65 76.9651,185.9674 70.0282,172.3582 55.5,177.0763 52.3218,162.1354 37.0675,162.9325 37.8646,147.6782 22.9237,144.5 27.6418,129.9718 14.0326,123.0349 22.35,110.2228 11,100 22.35,89.7772 14.0326,76.9651 27.6418,70.0282 22.9237,55.5 37.8646,52.3218 37.0675,37.0675 52.3218,37.8646 55.5,22.9237 70.0282,27.6418 76.9651,14.0326 89.7772,22.35"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="skeletonized-hub-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(354.6px, 387.6px) scale(calc(max(0, 52.8) / max(0.000001, 800)), calc(max(0, 52.8) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(20 36 42 / 1)" stroke="rgb(242 220 157 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="ruby-bearing-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(372.2px, 405.2px) scale(calc(max(0, 17.6) / max(0.000001, 800)), calc(max(0, 17.6) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(179 71 89 / 1)" stroke="rgb(238 216 175 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="caliber-gear-2 ga-shared">
<div class="cut-brass-wheel-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(410px, 349px) scale(calc(max(0, 72) / max(0.000001, 800)), calc(max(0, 72) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(217 183 120 / 1)" stroke="rgb(117 96 61 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<polygon points="100,11 110.2228,22.35 123.0349,14.0326 129.9718,27.6418 144.5,22.9237 147.6782,37.8646 162.9325,37.0675 162.1354,52.3218 177.0763,55.5 172.3582,70.0282 185.9674,76.9651 177.65,89.7772 189,100 177.65,110.2228 185.9674,123.0349 172.3582,129.9718 177.0763,144.5 162.1354,147.6782 162.9325,162.9325 147.6782,162.1354 144.5,177.0763 129.9718,172.3582 123.0349,185.9674 110.2228,177.65 100,189 89.7772,177.65 76.9651,185.9674 70.0282,172.3582 55.5,177.0763 52.3218,162.1354 37.0675,162.9325 37.8646,147.6782 22.9237,144.5 27.6418,129.9718 14.0326,123.0349 22.35,110.2228 11,100 22.35,89.7772 14.0326,76.9651 27.6418,70.0282 22.9237,55.5 37.8646,52.3218 37.0675,37.0675 52.3218,37.8646 55.5,22.9237 70.0282,27.6418 76.9651,14.0326 89.7772,22.35"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="skeletonized-hub-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(424.4px, 363.4px) scale(calc(max(0, 43.199999999999996) / max(0.000001, 800)), calc(max(0, 43.199999999999996) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(20 36 42 / 1)" stroke="rgb(242 220 157 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="ruby-bearing-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(438.8px, 377.8px) scale(calc(max(0, 14.4) / max(0.000001, 800)), calc(max(0, 14.4) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(179 71 89 / 1)" stroke="rgb(238 216 175 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="caliber-gear-3 ga-shared">
<div class="cut-brass-wheel ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(394px, 427px) scale(calc(max(0, 64) / max(0.000001, 800)), calc(max(0, 64) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(217 183 120 / 1)" stroke="rgb(117 96 61 / 1)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<polygon points="100,11 110.2228,22.35 123.0349,14.0326 129.9718,27.6418 144.5,22.9237 147.6782,37.8646 162.9325,37.0675 162.1354,52.3218 177.0763,55.5 172.3582,70.0282 185.9674,76.9651 177.65,89.7772 189,100 177.65,110.2228 185.9674,123.0349 172.3582,129.9718 177.0763,144.5 162.1354,147.6782 162.9325,162.9325 147.6782,162.1354 144.5,177.0763 129.9718,172.3582 123.0349,185.9674 110.2228,177.65 100,189 89.7772,177.65 76.9651,185.9674 70.0282,172.3582 55.5,177.0763 52.3218,162.1354 37.0675,162.9325 37.8646,147.6782 22.9237,144.5 27.6418,129.9718 14.0326,123.0349 22.35,110.2228 11,100 22.35,89.7772 14.0326,76.9651 27.6418,70.0282 22.9237,55.5 37.8646,52.3218 37.0675,37.0675 52.3218,37.8646 55.5,22.9237 70.0282,27.6418 76.9651,14.0326 89.7772,22.35"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="skeletonized-hub ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(406.8px, 439.8px) scale(calc(max(0, 38.4) / max(0.000001, 800)), calc(max(0, 38.4) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(20 36 42 / 1)" stroke="rgb(242 220 157 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="ruby-bearing ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(419.6px, 452.6px) scale(calc(max(0, 12.8) / max(0.000001, 800)), calc(max(0, 12.8) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(179 71 89 / 1)" stroke="rgb(238 216 175 / 1)" stroke-width="3" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="88.5" ry="88.5"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
</div>
<div class="layer-03-floating-smoked-sapphire-dial ga-shared">
<div class="sunburst-face ga-shared"></div>
<div class="sixty-precision-minute-indices ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(264px, 264px) scale(calc(max(0, 272) / max(0.000001, 800)), calc(max(0, 272) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100.00 22.00L100.00 11.00 M108.78 16.46L109.30 11.49 M117.46 17.84L118.50 12.94 M125.96 20.11L127.50 15.36 M134.17 23.26L136.20 18.69 M139.00 32.45L144.50 22.92 M149.37 32.04L152.31 28.00 M156.21 37.58L159.55 33.86 M162.42 43.79L166.14 40.45 M167.96 50.63L172.00 47.69 M167.55 61.00L177.08 55.50 M176.74 65.83L181.31 63.80 M179.89 74.04L184.64 72.50 M182.16 82.54L187.06 81.50 M183.54 91.22L188.51 90.70 M178.00 100.00L189.00 100.00 M183.54 108.78L188.51 109.30 M182.16 117.46L187.06 118.50 M179.89 125.96L184.64 127.50 M176.74 134.17L181.31 136.20 M167.55 139.00L177.08 144.50 M167.96 149.37L172.00 152.31 M162.42 156.21L166.14 159.55 M156.21 162.42L159.55 166.14 M149.37 167.96L152.31 172.00 M139.00 167.55L144.50 177.08 M134.17 176.74L136.20 181.31 M125.96 179.89L127.50 184.64 M117.46 182.16L118.50 187.06 M108.78 183.54L109.30 188.51 M100.00 178.00L100.00 189.00 M91.22 183.54L90.70 188.51 M82.54 182.16L81.50 187.06 M74.04 179.89L72.50 184.64 M65.83 176.74L63.80 181.31 M61.00 167.55L55.50 177.08 M50.63 167.96L47.69 172.00 M43.79 162.42L40.45 166.14 M37.58 156.21L33.86 159.55 M32.04 149.37L28.00 152.31 M32.45 139.00L22.92 144.50 M23.26 134.17L18.69 136.20 M20.11 125.96L15.36 127.50 M17.84 117.46L12.94 118.50 M16.46 108.78L11.49 109.30 M22.00 100.00L11.00 100.00 M16.46 91.22L11.49 90.70 M17.84 82.54L12.94 81.50 M20.11 74.04L15.36 72.50 M23.26 65.83L18.69 63.80 M32.45 61.00L22.92 55.50 M32.04 50.63L28.00 47.69 M37.58 43.79L33.86 40.45 M43.79 37.58L40.45 33.86 M50.63 32.04L47.69 28.00 M61.00 32.45L55.50 22.92 M65.83 23.26L63.80 18.69 M74.04 20.11L72.50 15.36 M82.54 17.84L81.50 12.94 M91.22 16.46L90.70 11.49"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="inner-chapter-ring ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(293px, 293px) scale(calc(max(0, 214) / max(0.000001, 800)), calc(max(0, 214) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(158 172 145 / 0.4)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="small-seconds-chapter ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(363px, 428px) scale(calc(max(0, 74) / max(0.000001, 800)), calc(max(0, 74) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(23 43 44 / 1)" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="small-seconds-needle ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(226 212 170 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 116.25 L104.25 112.25"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="maison-signature ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="A T E L I E R">
<text font-family=""Montserrat"" font-size="18" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(217 183 120 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="106.3">A T E L I E R</tspan></text>
</svg>
</div>
<div class="caliber-signature ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="AUTOMATIC">
<text font-family=""Montserrat"" font-size="16" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(147 169 156 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="105.6">AUTOMATIC</tspan></text>
</svg>
</div>
<div class="date-aperture ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(471px, 389px) scale(calc(max(0, 35) / max(0.000001, 800)), calc(max(0, 25) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(232 222 196 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<rect x="10" y="10" width="180" height="180" rx="0"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="date-disc ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="16">
<text font-family=""Montserrat"" font-size="92" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(38 51 51 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="132.2">16</tspan></text>
</svg>
</div>
</div>
<div class="layer-04-handset-and-sapphire-crystal ga-shared">
<div class="hour-hand ga-shared">
<div class="faceted-hour-sword ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(217 183 120 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M98.25 102.25 L98.5 85.25 L100 80.5 L101.5 85.25 L101.75 102.25Z"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="luminous-inlay ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(229 238 225 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 97.75 L100 85.75"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="minute-hand ga-shared">
<div class="faceted-minute-sword ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(216 227 212 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M98.75 103.75 L99 75.75 L100 71.5 L101 75.75 L101.25 103.75Z"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="minute-hand-bevel ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(217 183 120 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 98.5 L100 77"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="sweep-seconds ga-shared">
<div class="vermilion-seconds-needle ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(239 134 100 / 1)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M100 107 L100 71.25"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="hand-arbor ga-shared"></div>
<div class="sapphire-crystal-rim ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(239px, 239px) scale(calc(max(0, 322) / max(0.000001, 800)), calc(max(0, 322) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(196 229 223 / 0.52)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<ellipse cx="100" cy="100" rx="89.5" ry="89.5"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="crystal-reflection ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(0, 0) scale(calc(max(0, 800) / max(0.000001, 800)), calc(max(0, 800) / max(0.000001, 800))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="none" stroke="rgb(228 241 230 / 0.3)" stroke-width="1" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M73 75 Q86 61 104 63 M72 79 Q85 65 101 66"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
</div>
<div class="edition-inscription ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="A T E L I E R 0 4">
<text font-family=""Montserrat"" font-size="11" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(227 214 174 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="103.85">A T E L I E R 0 4</tspan></text>
</svg>
</div>
<div class="workshop-inscription ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:hidden" role="img" aria-label="M E C H A N I C A L / D E C O N S T R U C T E D">
<text font-family=""Montserrat"" font-size="5" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(165 186 176 / 1)" stroke="rgb(30 50 80 / 1)" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="101.75">M E C H A N I C A L / D E C O N S T R U C T E D</tspan></text>
</svg>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%400%2C400&display=swap");
#root {
--explode: 0;
--seconds: 37;
--finish: 0;
width: 800px;
height: 800px;
position: relative;
isolation: isolate;
overflow: hidden;
}
#root .ga-shared {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-paint {
position: absolute;
inset: 0;
pointer-events: none;
}
#root .ga-svg {
position: absolute;
pointer-events: none;
}
#root .overhead-softbox {
background: radial-gradient(ellipse, rgb(54 80 78) 0%, rgb(20 43 48) 65%, rgb(11 30 38) 100%) 0 0 / 800px 800px no-repeat, linear-gradient(rgb(20 43 48), rgb(20 43 48)) 0 0 / 800px 800px no-repeat;
}
#root .atelier-04-complete-timepiece {
filter: hue-rotate(calc(var(--finish) * 1deg));
}
#root .layer-01-hand-stitched-alligator-strap {
transform: translate(0, calc((var(--explode) * 1.6) * 1px));
transform-origin: 50% 50%;
}
#root .leather-scale-pattern {
left: 345px;
width: max(0px, 110px);
top: 148px;
height: max(0px, 504px);
}
#root .layer-02-brushed-titanium-case {
transform: translate(0, calc((var(--explode) * 0.55) * 1px));
transform-origin: 50% 50%;
filter: drop-shadow(0 16px 12px rgb(2 12 19 / 0.65));
}
#root .crown-machining {
left: 562px;
width: max(0px, 22px);
top: 383px;
height: max(0px, 34px);
}
#root .recessed-movement-chamber {
background: radial-gradient(ellipse, rgb(32 55 57) 0%, rgb(16 31 35) 60.1%, rgb(180 155 105) 67.87%, rgb(232 212 160) 70.7%, transparent 70.8%, transparent 100%) 249px 249px / 302px 302px no-repeat, radial-gradient(ellipse, rgb(228 232 223) 0%, rgb(154 175 169) 21.21%, rgb(239 243 223) 41.01%, rgb(113 134 134) 50.9%, rgb(36 61 67) 57.97%, rgb(196 211 189) 63.63%, rgb(241 235 206) 67.87%, rgb(89 113 115) 70.7%, transparent 70.8%, transparent 100%) 218px 218px / 364px 364px no-repeat;
}
#root .layer-03-floating-smoked-sapphire-dial {
transform: translate(calc((var(--explode) * (0 - 1.4)) * 1px), calc((var(--explode) * (0 - 0.8)) * 1px));
transform-origin: 50% 50%;
filter: drop-shadow(0 16px 12px rgb(2 12 19 / 0.65));
}
#root .sunburst-face {
background: radial-gradient(ellipse, rgb(37 60 62) 0%, rgb(21 44 49) 43.83%, rgb(9 27 34) 66.46%, rgb(198 184 137) 69.29%, rgb(119 104 68) 70.7%, transparent 70.8%, transparent 100%) 254px 254px / 292px 292px no-repeat;
}
#root .maison-signature {
left: 343px;
width: max(0px, 114px);
top: 283px;
height: max(0px, 114px);
}
#root .caliber-signature {
left: 357px;
width: max(0px, 86px);
top: 321px;
height: max(0px, 86px);
}
#root .date-disc {
left: 475px;
width: max(0px, 26px);
top: 388px;
height: max(0px, 26px);
}
#root .layer-04-handset-and-sapphire-crystal {
transform: translate(calc((var(--explode) * 1.4) * 1px), calc((var(--explode) * (0 - 2.1)) * 1px));
transform-origin: 50% 50%;
filter: drop-shadow(2px 7px 4px rgb(2 11 14 / 0.7));
}
#root .hour-hand {
transform: rotate(-54deg);
transform-origin: 50% 50%;
}
#root .minute-hand {
transform: rotate(56deg);
transform-origin: 50% 50%;
}
#root .sweep-seconds {
transform: rotate(calc((var(--seconds) * 6) * 1deg));
transform-origin: 50% 50%;
}
#root .hand-arbor {
background: radial-gradient(ellipse, rgb(247 239 205) 0%, rgb(205 182 126) 45.96%, rgb(115 90 56) 70.7%, transparent 70.8%, transparent 100%) 389px 389px / 22px 22px no-repeat;
}
#root .edition-inscription {
left: 225px;
width: max(0px, 350px);
top: -100px;
height: max(0px, 350px);
}
#root .workshop-inscription {
left: 198px;
width: max(0px, 404px);
top: 537px;
height: max(0px, 404px);
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
Separate strap, case, dial and crystal into an exploded technical view.
Move the sweep seconds hand.
Shift the titanium and brass finishing tones.
Atelier 04 | Exploded Mechanical Watch
Yoav Kadosh
A forest-green mechanical timepiece with a machined titanium case, brass caliber, smoked sapphire and hand-stitched strap. Explode separates four nested assemblies; Seconds moves the sweep hand; Finish shifts the metal tones. Close Explode to rebuild the watch.
Colors
Views
180
Code size
37.43 KB
Layers
51
<iframe
src="https://gra.dient.art/embed/l89shhri80"
title="Atelier 04 | Exploded Mechanical Watch | GradientArt"
width="800"
height="800"
style="border: 0; max-width: 100%; aspect-ratio: 800 / 800; height: auto;"
loading="lazy"
></iframe>Layers (51)
Workshop inscription
text
Edition inscription
text
Atelier 04 / complete timepiece
Folder
04 / Handset and sapphire crystal
Folder
Crystal reflection
shape
Sapphire crystal rim
shape
Hand arbor
radial
Sweep seconds
Folder
Vermilion seconds needle
shape
Minute hand
Folder
Minute hand bevel
shape
Faceted minute sword
shape
Hour hand
Folder
Luminous inlay
shape
Faceted hour sword
shape
03 / Floating smoked-sapphire dial
Folder
Date disc
text
Date aperture
shape
Caliber signature
text
Maison signature
text
Small seconds needle
shape
Small seconds chapter
shape
Inner chapter ring
shape
Sixty precision minute indices
shape
Sunburst face
radial
02 / Brushed titanium case
Folder
Caliber gear 3
Folder
Ruby bearing
shape
Skeletonized hub
shape
Cut brass wheel
shape
Caliber gear 2
Folder
Ruby bearing
shape
Skeletonized hub
shape
Cut brass wheel
shape
Caliber gear 1
Folder
Ruby bearing
shape
Skeletonized hub
shape
Cut brass wheel
shape
Recessed movement chamber
radial
Polished case bevel
radial
Crown machining
pattern
Fluted winding crown
shape
Lower sculpted lugs
shape
Upper sculpted lugs
shape
01 / Hand-stitched alligator strap
Folder
Right saddle stitch
shape
Left saddle stitch
shape
Leather scale pattern
pattern
Deep forest leather
shape
Overhead softbox
radial
Atelier backdrop
solid
GRADIENT
.ART
css