2024
Clock Concept (1998-2024)
In 1998, I created the image of a clock in Adobe Illustrator and Photoshop. And in 2024 I implemented that design using the tools of the web: HTML, CSS, and JavaScript.
12
1
2
3
4
5
6
7
8
9
10
11
Clock
concept
HTML
<section>
<div id="match" class="clock-gradient-bg clock-holder">
<div id="clock-implement">
<div class="number n12">12</div>
<div class="number n1">1</div>
<div class="number n2">2</div>
<div class="number n3">3</div>
<div class="number n4">4</div>
<div class="number n5">5</div>
<div class="number n6">6</div>
<div class="number n7">7</div>
<div class="number n8">8</div>
<div class="number n9">9</div>
<div class="number n10">10</div>
<div class="number n11">11</div>
<div class="shadow hours-hand"></div>
<div class="hand hours-hand"></div>
<div class="shadow seconds-hand"></div>
<div class="hand seconds-hand"></div>
<div class="shadow minutes-hand"></div>
<div class="hand minutes-hand"></div>
</div>
<h2>Clock<br/>concept</h2>
</div>
</section>
JavaScript
var setTime = function () {
var seconds = new Date().getSeconds();
var hours = new Date().getHours() % 12;
var minutes = new Date().getMinutes();
var milliseconds = new Date().getMilliseconds();
var sdegree = (seconds * 6) + (milliseconds * 0.006);
var srotate = "rotate(" + sdegree + "deg)";
var hdegree = hours * 30 + (minutes / 2) + (seconds / 120) + (milliseconds / 120000);
var hrotate = "rotate(" + hdegree + "deg)";
var mdegree = minutes * 6 + (seconds / 10) + (milliseconds / 10000);
var mrotate = "rotate(" + mdegree + "deg)";
document.querySelector(".hand.seconds-hand").style.transform = srotate;
document.querySelector(".hand.minutes-hand").style.transform = mrotate;
document.querySelector(".hand.hours-hand").style.transform = hrotate;
document.querySelector(".shadow.seconds-hand").style.transform = srotate;
document.querySelector(".shadow.minutes-hand").style.transform = mrotate;
document.querySelector(".shadow.hours-hand").style.transform = hrotate;
}
setInterval(setTime, 75);SCSS
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: #000;
margin: 1em -2em 0 -2em;
padding: 1rem;
gap: 1rem;
h2 {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 1rem;
text-align: center;
color: #fff;
font-weight: 100;
margin: 0;
padding: 0;
}
}
div.clock-holder {
width: 400px;
height: 440px;
background: #000;
}
#clock-implement {
--pinlineColor: rgba(0, 0, 0, 0.3);
position: relative;
width: 400px;
aspect-ratio: 1;
background-color: transparent;
background-image: linear-gradient(
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
linear-gradient(
90deg,
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
linear-gradient(
30deg,
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
linear-gradient(
60deg,
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
linear-gradient(
120deg,
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
linear-gradient(
150deg,
transparent 49.8%,
var(--pinlineColor) 49.8% 50.2%,
transparent 50.2%
),
radial-gradient(
circle,
rgba(255, 255, 255, 0.4) 61.5%,
rgba(0, 0, 0, 0.5) 61.5% 62%,
rgba(234, 23, 13, 0.2) 62% 66%,
rgba(0, 0, 0, 0.7) 65.5%,
rgba(51, 102, 51, 0.3) 68% 69%,
#000 69%),
conic-gradient(
rgba(157, 242, 236, 0.2) 30deg,
rgba(157, 242, 236, 0.3) 120deg,
transparent,
rgba(157, 242, 236, 0.2),
rgba(157, 242, 236, 0.6) 270deg,
rgba(157, 242, 236, 0.3),
rgba(157, 242, 236, 0.2) 300deg
);
}
div.clock-gradient-bg {
background-image: linear-gradient(transparent 400px, #000 400px),
linear-gradient(
90deg,
rgb(136, 190, 140),
rgb(175, 135, 113),
rgb(180, 125, 127),
rgb(173, 121, 162),
rgb(98, 113, 188),
rgb(60, 137, 188),
rgb(57, 191, 190)
);
}
#clock-implement > * {
position: absolute;
}
#clock-implement div.hand {
top: 0;
left: 0;
transition: all;
width: 400px;
aspect-ratio: 1;
background-color: transparent;
background-image: linear-gradient(
90deg,
transparent 48%,
rgba(83, 82, 169, 0.3) 48.2% 48.3%,
rgb(210, 169, 175) 49%,
#fff,
rgb(210, 169, 175) 51%,
rgba(83, 82, 169, 0.3) 51.7% 51.8%,
transparent 52%
)
}
#clock-implement div.shadow, #clock-implement div.shadow.seconds-hand {
width: 400px;
aspect-ratio: 1;
background-color: transparent;
transition: all;
background-image: linear-gradient(
90deg,
transparent 48%,
rgba(0, 0, 0, 0.2),
transparent 52%
);
top: 1%;
left: 2%;
}
#clock-implement div.shadow.seconds-hand {
clip-path: polygon(
49.5% 17.5%, 50.5% 17.5%, 50.5% 50%, 49.5% 50%
);
}
#clock-implement div.hours-hand {
clip-path: polygon(
48% 28%, 52% 28%, 52% 50%, 48% 50%
);
}
#clock-implement div.minutes-hand {
clip-path: polygon(
48% 17.5%, 52% 17.5%, 52% 52%, 48% 52%
);
}
#clock-implement div.seconds-hand {
background-image: linear-gradient(
90deg,
transparent 49.6%,
red,
transparent 50.4%);
clip-path: polygon(
49% 17.5%, 51% 17.5%, 51% 50%, 29% 50%
);
}
#clock-implement .number {
display: flex;
justify-content: center;
align-content: center;
height: 8%;
width: 8%;
background-color: pink;
border-radius: 50%;
border: none;
border: 1px solid #000;
text-indent: 400vw;
overflow: hidden;
}
/* TODO improve */
.n12 {
top: 10%;
left: 46%;
background-image: linear-gradient(
90deg,
#fff 20%,
transparent 20%
),
conic-gradient(
from 45deg at 35% 90%,
#fff 45deg,
#000 45deg 225deg,
transparent 225deg
),
radial-gradient(
circle at 50% 43%,
#000 30%,
transparent 30%
),
conic-gradient(
from -30deg at 60% 70%,
#fff 180deg,
#000 180deg
)
}
.n1 {
left: 63.5%;
top: 16%;
background-image: linear-gradient(
90deg,
#000 50%,
#fff 50%)
}
.n2 {
left: 75.5%;
top: 28%;
background-image: conic-gradient(
from 45deg at 15% 90%,
#fff 45deg,
#000 45deg 225deg,
transparent 225deg
),
radial-gradient(
circle at 30% 40%,
#000 30%,
transparent 30%
),
conic-gradient(
from -30deg at 35% 70%,
#fff 180deg,
#000 180deg
)
}
.n3 {
left: 82%;
top: 46%;
background-image: radial-gradient(circle at 25% 25%, #000 20%, transparent 20%),
radial-gradient(circle at 25% 75%, #000 20%, transparent 20%),
linear-gradient(
#fff 15%,
transparent 8% 92%,
#fff 92%
),
linear-gradient(
90deg,
#000 30%,
#fff 30%)
}
.n4 {
background-image: conic-gradient(
from 45deg at -1% 60%,
#fff 45deg,
transparent 45deg
),
linear-gradient(
90deg,
#000 55%,
#fff 55%);
left: 75.5%;
top: 63%;
}
.n5 {
left: 63.5%;
top: 76%;
background-image: linear-gradient(
#fff 28%,
transparent 28% 80%,
#fff 80%
),
conic-gradient(
at 50% 45%,
transparent 270deg,
#fff 270deg
),
radial-gradient(
circle at 25% 115%,
#000 40%,
#fff 40% 60%,
#000 0
);
}
.n6 {
top: 82%;
left: 46%;
background-image: radial-gradient(
circle at 46% 80%,
#fff 50%,
transparent 50%),
linear-gradient(
135deg,
#fff 30%,
#000 30%
);
}
.n7 {
top: 76%;
left: 28.5%;
background-image: conic-gradient(
from 210deg at 80% 30%,
#000 60deg,
#fff 60deg
)
}
.n8 {
left: 15.5%;
top: 63%;
background-image: radial-gradient(circle at 50% 25%, #fff 30%, transparent 30%),
radial-gradient(circle at 50% 75%, #fff 30%, #000 30%);
}
.n9 {
left: 10%;
top: 46%;
background-image: radial-gradient(
circle at 46% 20%,
#fff 50%,
transparent 50%),
linear-gradient(
-60deg,
#fff 30%,
#000 30%
);
}
.n10 {
background-image: linear-gradient(
90deg,
#000 33%,
transparent 33%
),
radial-gradient(
ellipse 50% 80% at 75%,
#000 60%,
#fff 60%
);
left: 15.5%;
top: 28%;
}
.n11 {
background-image: linear-gradient(
90deg,
#000 33%,
#fff 33% 66%,
#000 66%
);
left: 28.5%;
top: 16%;
}Original Image
