<div class="watch-band-top"></div>
<div class="watch-top-1"></div>
<div class="watch-top-2"></div>
<div class="watch-band-bottom"></div>
<div class="watch-bottom-1"></div>
<div class="watch-bottom-2"></div>
<div class="watch-body">
<div class="mickey-body">
<div class="mickey-mouse-tail"></div>
<div class="mickey-pants">
<div class="mickey-leg-1"></div>
<div class="mickey-leg-2"></div>
<div class="mickey-right-shoe-top"></div>
<div class="mickey-right-shoe-middle"></div>
<div class="mickey-left-shoe-middle"></div>
<div class="mickey-left-shoe-top"></div>
<div class="mickey-pant-leg-1"></div>
<div class="mickey-pant-leg-2"></div>
<div class="mickey-pants-button-1"></div>
<div class="mickey-pants-button-2"></div>
<div class="mickey-neck"></div>
<div class="mickey-head">
<div class="mickey-face-1"></div>
<div class="mickey-face-2"></div>
<div class="mickey-face-3"></div>
<div class="mickey-face-4"></div>
<div class="mickey-mouth">
<div class="mickey-mouth-1"></div>
<div class="mickey-mouth-2"></div>
<div class="mickey-mouth-3"></div>
<div class="mickey-face-5"></div>
<div class="mickey-face-6"></div>
<div class="mickey-nose"></div>
<div class="mickey-eye-1"></div>
<div class="mickey-eye-2"></div>
<div class="mickey-ear-1"></div>
<div class="mickey-ear-2"></div>
<div class="watch-min-origin">
<div class="watch-min-dot"></div>
<div class="watch-min-dash deg-6"></div>
<div class="watch-min-dash deg-12"></div>
<div class="watch-min-dash deg-18"></div>
<div class="watch-min-dash deg-24"></div>
<div class="watch-min-dot deg-30"></div>
<div class="watch-min-dash deg-36"></div>
<div class="watch-min-dash deg-42"></div>
<div class="watch-min-dash deg-48"></div>
<div class="watch-min-dash deg-54"></div>
<div class="watch-min-dot deg-60"></div>
<div class="watch-min-dash deg-66"></div>
<div class="watch-min-dash deg-72"></div>
<div class="watch-min-dash deg-78"></div>
<div class="watch-min-dash deg-84"></div>
<div class="watch-min-dot deg-90"></div>
<div class="watch-min-dash deg-96"></div>
<div class="watch-min-dash deg-102"></div>
<div class="watch-min-dash deg-108"></div>
<div class="watch-min-dash deg-114"></div>
<div class="watch-min-dot deg-120"></div>
<div class="watch-min-dash deg-126"></div>
<div class="watch-min-dash deg-132"></div>
<div class="watch-min-dash deg-138"></div>
<div class="watch-min-dash deg-144"></div>
<div class="watch-min-dot deg-150"></div>
<div class="watch-min-dash deg-156"></div>
<div class="watch-min-dash deg-162"></div>
<div class="watch-min-dash deg-168"></div>
<div class="watch-min-dash deg-174"></div>
<div class="watch-min-dot deg-180"></div>
<div class="watch-min-dash deg-186"></div>
<div class="watch-min-dash deg-192"></div>
<div class="watch-min-dash deg-198"></div>
<div class="watch-min-dash deg-204"></div>
<div class="watch-min-dot deg-210"></div>
<div class="watch-min-dash deg-216"></div>
<div class="watch-min-dash deg-222"></div>
<div class="watch-min-dash deg-228"></div>
<div class="watch-min-dash deg-234"></div>
<div class="watch-min-dot deg-240"></div>
<div class="watch-min-dash deg-246"></div>
<div class="watch-min-dash deg-252"></div>
<div class="watch-min-dash deg-258"></div>
<div class="watch-min-dash deg-264"></div>
<div class="watch-min-dot deg-270"></div>
<div class="watch-min-dash deg-276"></div>
<div class="watch-min-dash deg-282"></div>
<div class="watch-min-dash deg-288"></div>
<div class="watch-min-dash deg-294"></div>
<div class="watch-min-dot deg-300"></div>
<div class="watch-min-dash deg-306"></div>
<div class="watch-min-dash deg-312"></div>
<div class="watch-min-dash deg-318"></div>
<div class="watch-min-dash deg-324"></div>
<div class="watch-min-dot deg-330"></div>
<div class="watch-min-dash deg-336"></div>
<div class="watch-min-dash deg-342"></div>
<div class="watch-min-dash deg-348"></div>
<div class="watch-min-dash deg-354"></div>
<div class="watch-number-origin">
<div class="number hour-1"></div>
<div class="number hour-2"></div>
<div class="number hour-3"></div>
<div class="number hour-4"></div>
<div class="number hour-5"></div>
<div class="number hour-6"></div>
<div class="number hour-7"></div>
<div class="number hour-8"></div>
<div class="number hour-9"></div>
<div class="number hour-10"></div>
<div class="number hour-11"></div>
<div class="number hour-12"></div>
<div id="watch-date"></div>
<div id="watch-second"></div>
<div id="watch-minute">
<div class="mickey-hand-left">
<div class="mickey-hand-left-wrist"></div>
<div class="mickey-hand-left-finger-1"></div>
<div class="mickey-hand-left-finger-3"></div>
<div class="mickey-hand-left-finger-2"></div>
<div class="mickey-hand-left-thumb-1"></div>
<div class="mickey-hand-left-thumb-2"></div>
<div class="mickey-hand-left-cuff"></div>
<div id="watch-hour">
<div class="mickey-hand-right">
<div class="mickey-hand-right-wrist"></div>
<div class="mickey-hand-right-finger-1"></div>
<div class="mickey-hand-right-finger-2"></div>
<div class="mickey-hand-right-finger-3"></div>
<div class="mickey-hand-right-thumb-1"></div>
<div class="mickey-hand-right-thumb-2"></div>
<div class="mickey-hand-right-cuff"></div>
<div class="watch-center"></div>
.artboard {
.watch-body {
8% 50%,
#ffffff80 0%,
#ffffff00 100%
-webkit-radial-gradient(50% 100%, 12% 50%, #ffffff99 0%, #ffffff00
100%),
-webkit-radial-gradient(0% 50%, 50% 7%, #ffffff80 0%, #ffffff00),
-webkit-repeating-radial-gradient(50% 50%, 100% 100%, #ffffff00 0%, #ffffff00
6%, #ffffff1a 7.5%),
1.2%, #ffffff33 2.2%),
-webkit-radial-gradient(50% 50%, 200% 50%, #e5e5e5 5%, #d8d8d8 30%, #999999
background: #fcf4f4;
box-shadow: inset 2px 5px 15px -5px #00000083;
.watch-band-top {
border-radius: 50% 50% 4% 4% / 16% 16% 1% 1%;
background: #462512;
bottom: 422px;
.watch-top-1 {
#cbcbcb 0%,
#cbcbcb 80%,
#cbcbcb 81%,
#e6e6e6 86%,
#e6e6e6 100%
transform: skewY(-24deg);
.watch-top-2 {
transform: skewY(24deg);
.watch-band-bottom {
border-radius: 4% 4% 50% 50% / 1% 1% 16% 16%;
top: 422px;
scroll-behavior: none;
.watch-bottom-1 {
.watch-bottom-2 {
border-radius: 15% 50% 50% 15% / 12% 35% 35% 12%;
#cbcbcb 70%,
#b4b4b4 100%
.watch-crown::before {
/* WATCH COMPONENTS */
.watch-center {
top: 142.5px;
left: 142.5px;
#watch-hour {
#watch-minute {
#watch-second {
left: 148.5px;
#watch-second::after {
box-shadow: inset 2px 2px 3px #00000023;
font-family: "Cutive Mono", monospace;
/* Mickey */
.mickey-hand-right{
.mickey-hand-right-wrist {
.mickey-hand-right-finger-1 {
border-radius: 50% 50% 0% 0% / 22% 22% 0% 0%  ;
.mickey-hand-right-finger-2 {
border-radius: 50% 50% 48% 57% / 34% 34% 34% 30%  ;
.mickey-hand-right-finger-3 {
border-radius: 49% 50% 38% 77% / 42% 34% 34% 44%   ;
.mickey-hand-right-thumb-1 {
.mickey-hand-right-thumb-2 {
border-radius: 47% 48% 46% 46% / 42% 29% 67% 45% ;
.mickey-hand-right-cuff {
.mickey-hand-left{
.mickey-hand-left-wrist {
.mickey-hand-left-finger-1 {
.mickey-hand-left-finger-2 {
.mickey-hand-left-finger-3 {
.mickey-hand-left-thumb-1 {
.mickey-hand-left-thumb-2 {
.mickey-hand-left-cuff {
.mickey-body {
.mickey-head {
.mickey-face-1 {
.mickey-face-2 {
border-radius: 46% 56% 56% 15% / 72% 64% 28% 19%;
.mickey-face-3 {
border-radius: 50% 50% 33% 64% / 50% 55% 45% 50%;
.mickey-face-4 {
border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
.mickey-face-5 {
border-radius: 0% 100% 100% 0% / 0% 51% 53% 44%;
.mickey-face-6 {
.mickey-mouth {
.mickey-mouth-1 {
border-radius: 0% 100% 100% 0% / 37% 41% 52% 39%;
transform: rotate(120deg) skew(-6deg);
.mickey-mouth-2 {
background: #a80a0a;
.mickey-mouth-3 {
.mickey-eye-1 {
border-radius: 54% 71% 78% 50% / 62% 58% 47% 44%;
.mickey-eye-1::after {
.mickey-eye-2 {
.mickey-eye-2::after {
.mickey-nose {
border-radius: 56% 64% 65% 39% / 38% 43% 56% 39%;
.mickey-ear-1 {
.mickey-ear-2 {
transform: rotate(64deg);
.mickey-neck {
border-bottom: 50px solid #222222;
border-radius: 50% 50% 50% 50% / 90% 90% 10% 10%;
transform: skew(20deg, -10deg) rotate(-10deg);
.mickey-neck::after {
.mickey-pants {
border-radius: 59% 88% 78% 51% / 69% 59% 90% 68%;
transform: rotate(-24deg) skew(-8deg);
.mickey-mouse-tail {
.mickey-pants-button-1 {
transform: rotate(24deg) skew(8deg);
.mickey-pants-button-2 {
border-right: 1.5px solid black;
.mickey-pant-leg-1 {
transform: rotate(44deg) skew(-4deg);
border-radius: 0% 0% 54% 39% / 23% 18% 27% 26%;
.mickey-pant-leg-2 {
border-radius: 25% 25% 54% 39% / 23% 18% 27% 26%;
transform: rotate(-4deg) skew(-14deg);
.mickey-leg-1 {
transform: rotate(54deg) skew(8deg);
.mickey-leg-2 {
transform: rotate(28deg) skew(8deg);
.mickey-right-shoe-top {
background: #f0d125;
transform: rotate(44deg) skew(8deg);
.mickey-right-shoe-middle {
border-radius: 32% 66% 58% 40% / 44% 47% 53% 55% ;
transform: rotate(48deg) skew(8deg);
.mickey-left-shoe-top {
transform: rotate(8deg) skew(12deg);
.mickey-left-shoe-middle {
border-radius: 65% 45% 27% 62% / 65% 60% 60% 55%  ;
transform: rotate(14deg) skew(1deg);
/* Minute Marks */
.watch-min-origin {
left: 149.5px;
top: 149.5px;
transform: rotateX(5px);
.watch-min-dash {
.watch-min-dot {
.watch-min-dot::after {
.deg-6 {
transform-origin: 0 140px;
.deg-12 {
.deg-18 {
.deg-24 {
.deg-30 {
.deg-36 {
.deg-42 {
.deg-48 {
.deg-54 {
.deg-60 {
.deg-66 {
.deg-72 {
.deg-78 {
.deg-84 {
transform: rotate(84deg);
.deg-90 {
.deg-96 {
transform: rotate(96deg);
.deg-102 {
transform: rotate(102deg);
.deg-108 {
.deg-114 {
transform: rotate(114deg);
.deg-120 {
.deg-126 {
.deg-132 {
transform: rotate(132deg);
.deg-138 {
transform: rotate(138deg);
.deg-144 {
.deg-150 {
.deg-156 {
transform: rotate(156deg);
.deg-162 {
.deg-168 {
transform: rotate(168deg);
.deg-174 {
transform: rotate(174deg);
.deg-180 {
.deg-186 {
transform: rotate(186deg);
.deg-192 {
transform: rotate(192deg);
.deg-198 {
transform: rotate(198deg);
.deg-204 {
transform: rotate(204deg);
.deg-210 {
.deg-216 {
.deg-222 {
transform: rotate(222deg);
.deg-228 {
transform: rotate(228deg);
.deg-234 {
transform: rotate(234deg);
.deg-240 {
.deg-246 {
transform: rotate(246deg);
.deg-252 {
.deg-258 {
transform: rotate(258deg);
.deg-264 {
transform: rotate(264deg);
.deg-270 {
.deg-276 {
transform: rotate(276deg);
.deg-282 {
transform: rotate(282deg);
.deg-288 {
.deg-294 {
transform: rotate(294deg);
.deg-300 {
.deg-306 {
.deg-312 {
transform: rotate(312deg);
.deg-318 {
transform: rotate(318deg);
.deg-324 {
.deg-330 {
.deg-336 {
transform: rotate(336deg);
.deg-342 {
.deg-348 {
transform: rotate(348deg);
.deg-354 {
transform: rotate(354deg);
/* HOUR MARKS */
.watch-number-origin {
-webkit-text-stroke: 0.1px white;
text-shadow: -0.1px -0.1px 0 #fff, 0.1px -0.1px 0 #fff,
-0.1px 0.1px 0 #fff, 0.1px 0.1px 0 #fff;
.hour-1 {
transform-origin: 0 120px;
.hour-1::after {
.hour-2 {
.hour-2::after {
.hour-3 {
.hour-3::after {
.hour-4 {
.hour-4::after {
.hour-5 {
.hour-5::after {
.hour-6 {
transform: rotate(176deg);
.hour-6::after {
.hour-7 {
.hour-7::after {
.hour-8 {
.hour-8::after {
transform: rotate(-234deg);
.hour-9 {
.hour-9::after {
transform: rotate(-264deg);
.hour-10::after {
transform: rotate(322deg);
.hour-11::after {
transform: rotate(-322deg);
.hour-12 {
.hour-12::after {
const HOURHAND = document.querySelector("#watch-hour");
const MINUTEHAND = document.querySelector("#watch-minute");
const SECONDHAND = document.querySelector("#watch-second");
let hr = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
let hrPosition = (hr * 360) / 12 + (min * (360 / 60)) / 12;
let minPosition = (min * 360) / 60 + (sec * (360 / 60)) / 60;
let secPosition = (sec * 360) / 60;
function runTheClock() {
hrPosition = hrPosition + 3 / 360;
minPosition = minPosition + 6 / 60;
secPosition = secPosition + 6;
HOURHAND.style.transform = "rotate(" + hrPosition + "deg)";
MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)";
SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
document.getElementById("watch-date").innerHTML = day;
var interval = setInterval(runTheClock, 1000);