body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #D9D7DD; } .clock { border-radius: 100%; background: #ffffff; font-family: "Montserrat"; border: 5px solid white; box-shadow: inset 2px 3px 8px 0 rgba(0, 0, 0, 0.1); } .wrap { overflow: hidden; position: relative; width: 350px; height: 350px; border-radius: 100%; } right: 0; border-radius: 4px; background: #FF4B3E; transform-origin: bottom center; transform: rotate(180deg); z-index: 1; } .dot { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 100px; background: white; border: 2px solid #1b1b1b; border-radius: 100px; margin: auto; z-index: 1; } var inc = 1000; clock(); function clock() { const date = new Date(); const hours = ((date.getHours() + 11) % 12 + 1); const minutes = date.getMinutes(); const seconds = date.getSeconds(); const hour = hours * 30; const minute = minutes * 6; const second = seconds * 6;