<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier 04 | Exploded Mechanical Watch</title>
<style>
@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;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-fill {
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 .ga-node-49 {
background: radial-gradient(ellipse at 50% 50%, rgb(54 80 78 / 1) 0%, rgb(20 43 48 / 1) 65%, rgb(11 30 38 / 1) 100%) 0px 0px / 800px 800px no-repeat, linear-gradient(rgb(20 43 48 / 1), rgb(20 43 48 / 1)) 0px 0px / 800px 800px no-repeat;
}
#root .ga-node-3 {
filter: hue-rotate(calc(var(--finish) * 1deg));
}
#root .ga-node-44 {
transform: translate(0px, calc((var(--explode) * 1.6) * 1px));
transform-origin: 50% 50%;
}
#root .ga-node-48 {
left: 327px;
width: max(0px, 146px);
top: 120px;
height: max(0px, 560px);
}
#root .ga-node-47 {
left: 345px;
width: max(0px, 110px);
top: 148px;
height: max(0px, 504px);
}
#root .ga-node-46 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-45 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-26 {
transform: translate(0px, calc((var(--explode) * 0.55) * 1px));
transform-origin: 50% 50%;
filter: drop-shadow(0px 16px 12px rgb(2 12 19 / 0.65));
}
#root .ga-node-43 {
left: 289px;
width: max(0px, 222px);
top: 227px;
height: max(0px, 111px);
}
#root .ga-node-42 {
left: 289px;
width: max(0px, 222px);
top: 462px;
height: max(0px, 111px);
}
#root .ga-node-41 {
left: 553px;
width: max(0px, 42px);
top: 374px;
height: max(0px, 52px);
}
#root .ga-node-40 {
left: 562px;
width: max(0px, 22px);
top: 383px;
height: max(0px, 34px);
}
#root .ga-node-39 {
background: radial-gradient(ellipse at 50% 50%, rgb(32 55 57 / 1) 0%, rgb(16 31 35 / 1) 60.1%, rgb(180 155 105 / 1) 67.87%, rgb(232 212 160 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 249px 249px / 302px 302px no-repeat, radial-gradient(ellipse at 50% 50%, rgb(228 232 223 / 1) 0%, rgb(154 175 169 / 1) 21.21%, rgb(239 243 223 / 1) 41.01%, rgb(113 134 134 / 1) 50.9%, rgb(36 61 67 / 1) 57.97%, rgb(196 211 189 / 1) 63.63%, rgb(241 235 206 / 1) 67.87%, rgb(89 113 115 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 218px 218px / 364px 364px no-repeat;
}
#root .ga-node-38 {
left: 337px;
width: max(0px, 88px);
top: 370px;
height: max(0px, 88px);
}
#root .ga-node-37 {
left: 354.6px;
width: max(0px, 52.8px);
top: 387.6px;
height: max(0px, 52.8px);
}
#root .ga-node-36 {
left: 372.2px;
width: max(0px, 17.6px);
top: 405.2px;
height: max(0px, 17.6px);
}
#root .ga-node-34 {
left: 410px;
width: max(0px, 72px);
top: 349px;
height: max(0px, 72px);
}
#root .ga-node-33 {
left: 424.4px;
width: max(0px, 43.199999999999996px);
top: 363.4px;
height: max(0px, 43.199999999999996px);
}
#root .ga-node-32 {
left: 438.8px;
width: max(0px, 14.4px);
top: 377.8px;
height: max(0px, 14.4px);
}
#root .ga-node-30 {
left: 394px;
width: max(0px, 64px);
top: 427px;
height: max(0px, 64px);
}
#root .ga-node-29 {
left: 406.8px;
width: max(0px, 38.4px);
top: 439.8px;
height: max(0px, 38.4px);
}
#root .ga-node-28 {
left: 419.6px;
width: max(0px, 12.8px);
top: 452.6px;
height: max(0px, 12.8px);
}
#root .ga-node-16 {
transform: translate(calc((var(--explode) * (0 - 1.4)) * 1px), calc((var(--explode) * (0 - 0.8)) * 1px));
transform-origin: 50% 50%;
filter: drop-shadow(0px 16px 12px rgb(2 12 19 / 0.65));
}
#root .ga-node-25 {
background: radial-gradient(ellipse at 50% 50%, rgb(37 60 62 / 1) 0%, rgb(21 44 49 / 1) 43.83%, rgb(9 27 34 / 1) 66.46%, rgb(198 184 137 / 1) 69.29%, rgb(119 104 68 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 254px 254px / 292px 292px no-repeat;
}
#root .ga-node-24 {
left: 264px;
width: max(0px, 272px);
top: 264px;
height: max(0px, 272px);
}
#root .ga-node-23 {
left: 293px;
width: max(0px, 214px);
top: 293px;
height: max(0px, 214px);
}
#root .ga-node-22 {
left: 363px;
width: max(0px, 74px);
top: 428px;
height: max(0px, 74px);
}
#root .ga-node-21 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-20 {
left: 343px;
width: max(0px, 114px);
top: 283px;
height: max(0px, 114px);
}
#root .ga-node-19 {
left: 357px;
width: max(0px, 86px);
top: 321px;
height: max(0px, 86px);
}
#root .ga-node-18 {
left: 471px;
width: max(0px, 35px);
top: 389px;
height: max(0px, 25px);
}
#root .ga-node-17 {
left: 475px;
width: max(0px, 26px);
top: 388px;
height: max(0px, 26px);
}
#root .ga-node-4 {
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 .ga-node-13 {
transform: rotate(-54deg);
transform-origin: 50% 50%;
}
#root .ga-node-15 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-14 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-10 {
transform: rotate(56deg);
transform-origin: 50% 50%;
}
#root .ga-node-12 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-11 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-8 {
transform: rotate(calc((var(--seconds) * 6) * 1deg));
transform-origin: 50% 50%;
}
#root .ga-node-9 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-7 {
background: radial-gradient(ellipse at 50% 50%, rgb(247 239 205 / 1) 0%, rgb(205 182 126 / 1) 45.96%, rgb(115 90 56 / 1) 70.7%, rgb(0 0 0 / 0) 70.8%, rgb(0 0 0 / 0) 100%) 389px 389px / 22px 22px no-repeat;
}
#root .ga-node-6 {
left: 239px;
width: max(0px, 322px);
top: 239px;
height: max(0px, 322px);
}
#root .ga-node-5 {
left: 0px;
width: max(0px, 800px);
top: 0px;
height: max(0px, 800px);
}
#root .ga-node-2 {
left: 225px;
width: max(0px, 350px);
top: -100px;
height: max(0px, 350px);
}
#root .ga-node-1 {
left: 198px;
width: max(0px, 404px);
top: 537px;
height: max(0px, 404px);
}
</style>
</head>
<body>
<div id="root">
<div class="ga-node-0 ga-fill">
<div class="ga-node-50 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
<defs>
<pattern id="ga-svg-5" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-6" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-9" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-11" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-12" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-14" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-15" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-18" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-21" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-22" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-23" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-24" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-28" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-29" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-30" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-32" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-33" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-34" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-36" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-37" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-38" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-41" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-42" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-43" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-45" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-46" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
<pattern id="ga-svg-48" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<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>
</pattern>
</defs>
</svg>
</div>
<div class="ga-node-49 ga-fill"></div>
<div class="ga-node-3 ga-fill">
<div class="ga-node-44 ga-fill">
<div class="ga-node-48 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-48)"/>
</svg>
</div>
<div class="ga-node-47 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:visible" role="img" aria-label="pattern">
<pattern id="ga-svg-47" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<pattern id="ga-svg-47-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-47-content)"/>
</svg>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-47)"/>
</svg>
</div>
<div class="ga-node-46 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-46)"/>
</svg>
</div>
<div class="ga-node-45 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-45)"/>
</svg>
</div>
</div>
<div class="ga-node-26 ga-fill">
<div class="ga-node-43 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-43)"/>
</svg>
</div>
<div class="ga-node-42 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-42)"/>
</svg>
</div>
<div class="ga-node-41 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-41)"/>
</svg>
</div>
<div class="ga-node-40 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:visible" role="img" aria-label="pattern">
<pattern id="ga-svg-40" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<pattern id="ga-svg-40-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-40-content)"/>
</svg>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-40)"/>
</svg>
</div>
<div class="ga-node-39 ga-fill"></div>
<div class="ga-node-35 ga-fill">
<div class="ga-node-38 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-38)"/>
</svg>
</div>
<div class="ga-node-37 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-37)"/>
</svg>
</div>
<div class="ga-node-36 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-36)"/>
</svg>
</div>
</div>
<div class="ga-node-31 ga-fill">
<div class="ga-node-34 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-34)"/>
</svg>
</div>
<div class="ga-node-33 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-33)"/>
</svg>
</div>
<div class="ga-node-32 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-32)"/>
</svg>
</div>
</div>
<div class="ga-node-27 ga-fill">
<div class="ga-node-30 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-30)"/>
</svg>
</div>
<div class="ga-node-29 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-29)"/>
</svg>
</div>
<div class="ga-node-28 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-28)"/>
</svg>
</div>
</div>
</div>
<div class="ga-node-16 ga-fill">
<div class="ga-node-25 ga-fill"></div>
<div class="ga-node-24 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-24)"/>
</svg>
</div>
<div class="ga-node-23 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-23)"/>
</svg>
</div>
<div class="ga-node-22 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-22)"/>
</svg>
</div>
<div class="ga-node-21 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-21)"/>
</svg>
</div>
<div class="ga-node-20 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:visible" role="img" aria-label="A T E L I E R">
<pattern id="ga-svg-20" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<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>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-20)"/>
</svg>
</div>
<div class="ga-node-19 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:visible" role="img" aria-label="AUTOMATIC">
<pattern id="ga-svg-19" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<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>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-19)"/>
</svg>
</div>
<div class="ga-node-18 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-18)"/>
</svg>
</div>
<div class="ga-node-17 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:visible" role="img" aria-label="16">
<pattern id="ga-svg-17" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<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>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-17)"/>
</svg>
</div>
</div>
<div class="ga-node-4 ga-fill">
<div class="ga-node-13 ga-fill">
<div class="ga-node-15 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-15)"/>
</svg>
</div>
<div class="ga-node-14 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-14)"/>
</svg>
</div>
</div>
<div class="ga-node-10 ga-fill">
<div class="ga-node-12 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-12)"/>
</svg>
</div>
<div class="ga-node-11 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-11)"/>
</svg>
</div>
</div>
<div class="ga-node-8 ga-fill">
<div class="ga-node-9 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-9)"/>
</svg>
</div>
</div>
<div class="ga-node-7 ga-fill"></div>
<div class="ga-node-6 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-6)"/>
</svg>
</div>
<div class="ga-node-5 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:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-5)"/>
</svg>
</div>
</div>
</div>
<div class="ga-node-2 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:visible" role="img" aria-label="A T E L I E R 0 4">
<pattern id="ga-svg-2" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<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>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-2)"/>
</svg>
</div>
<div class="ga-node-1 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:visible" 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">
<pattern id="ga-svg-1" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<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>
</pattern>
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-1)"/>
</svg>
</div>
</div>
</div>
</body>
</html>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.
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.