7 Segment Digital Clock

7-segment-digital-clock.markdown

7 Segment Digital Clock

A Pen by MinzCode on CodePen.

License.

index.html

<div class="digital-watch">
	<svg width="0" height="0" viewBox="0 0 0 0">
		<defs>
			<g id="unit-h">
				<path d="M0 20 L20 40 L180 40 L200 20 L180 0 L20 0 Z"></path>
			</g>
			<g id="unit-v">
				<path d="M20 0 L0 20 L0 180 L20 200 L40 180 L40 20 Z"></path>
			</g>
		</defs>
	</svg>
	<div class="hour">
		<svg id="hour-1" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
		<svg id="hour-2" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
	</div>
	<div class="minute">
		<svg id="minute-1" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
		<svg id="minute-2" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
	</div>
	<div class="second">
		<svg id="second-1" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
		<svg id="second-2" class="num-0" width="130" height="240" viewBox="0 0 260 480">
			<use xlink:href="#unit-h" class="segment a" x="30" y="0"></use>
			<use xlink:href="#unit-v" class="segment b" x="220" y="30"></use>
			<use xlink:href="#unit-v" class="segment c" x="220" y="250"></use>
			<use xlink:href="#unit-h" class="segment d" x="30" y="440"></use>
			<use xlink:href="#unit-v" class="segment e" x="0" y="250"></use>
			<use xlink:href="#unit-v" class="segment f" x="0" y="30"></use>
			<use xlink:href="#unit-h" class="segment g" x="30" y="220"></use>
		</svg>
	</div>
</div>

<a class="youtube-link" href="https://youtu.be/GlzDSCErJXs" target="_blank">https://youtu.be/GlzDSCErJXs</a>

script.js

function changeTime() {
	var hour = moment().format("HH");
	var minute = moment().format("mm");
	var second = moment().format("ss");

	document.getElementById("hour-1").setAttribute("class","num-"+hour.substr(0,1));
	document.getElementById("hour-2").setAttribute("class","num-"+hour.substr(1,1));
	document.getElementById("minute-1").setAttribute("class","num-"+minute.substr(0,1));
	document.getElementById("minute-2").setAttribute("class","num-"+minute.substr(1,1));
	document.getElementById("second-1").setAttribute("class","num-"+second.substr(0,1));
	document.getElementById("second-2").setAttribute("class","num-"+second.substr(1,1));

	setTimeout(changeTime, 1000);
}

changeTime();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

style.css

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #232525;
}
.digital-watch .hour,
.digital-watch .minute,
.digital-watch .second {
	position: relative;
	display: inline-block;
	margin: 30px;
	font-size: 0;
}
.digital-watch .hour::before,
.digital-watch .hour::after,
.digital-watch .minute::before,
.digital-watch .minute::after {
	content: '';
	position: absolute;
	right: -40px;
	width: 20px;
	height: 20px;
	background-color: #0984e3;
}
.digital-watch .hour::before,
.digital-watch .minute::before {
	top: 80px;
}
.digital-watch .hour::after,
.digital-watch .minute::after {
	top: 180px;
}
.digital-watch svg {
	display: inline-block;
	margin: 20px;
}
.digital-watch svg .segment {
	fill: rgba(0,0,0,.15);
	transition: .3s ease-in-out;
}
.digital-watch svg.num-1 .b,
.digital-watch svg.num-1 .c,

.digital-watch svg.num-2 .a,
.digital-watch svg.num-2 .b,
.digital-watch svg.num-2 .d,
.digital-watch svg.num-2 .e,
.digital-watch svg.num-2 .g,

.digital-watch svg.num-3 .a,
.digital-watch svg.num-3 .b,
.digital-watch svg.num-3 .c,
.digital-watch svg.num-3 .d,
.digital-watch svg.num-3 .g,

.digital-watch svg.num-4 .b,
.digital-watch svg.num-4 .c,
.digital-watch svg.num-4 .f,
.digital-watch svg.num-4 .g,

.digital-watch svg.num-5 .a,
.digital-watch svg.num-5 .c,
.digital-watch svg.num-5 .d,
.digital-watch svg.num-5 .f,
.digital-watch svg.num-5 .g,

.digital-watch svg.num-6 .a,
.digital-watch svg.num-6 .c,
.digital-watch svg.num-6 .d,
.digital-watch svg.num-6 .e,
.digital-watch svg.num-6 .f,
.digital-watch svg.num-6 .g,

.digital-watch svg.num-7 .a,
.digital-watch svg.num-7 .b,
.digital-watch svg.num-7 .c,

.digital-watch svg.num-8 .a,
.digital-watch svg.num-8 .b,
.digital-watch svg.num-8 .c,
.digital-watch svg.num-8 .d,
.digital-watch svg.num-8 .e,
.digital-watch svg.num-8 .f,
.digital-watch svg.num-8 .g,

.digital-watch svg.num-9 .a,
.digital-watch svg.num-9 .b,
.digital-watch svg.num-9 .c,
.digital-watch svg.num-9 .d,
.digital-watch svg.num-9 .f,
.digital-watch svg.num-9 .g,

.digital-watch svg.num-0 .a,
.digital-watch svg.num-0 .b,
.digital-watch svg.num-0 .c,
.digital-watch svg.num-0 .d,
.digital-watch svg.num-0 .e,
.digital-watch svg.num-0 .f {
	fill: #0984e3;
}

.youtube-link {
	position: fixed;
	left: 20px;
	bottom: 20px;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
}

styles

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&amp;display=swap" rel="stylesheet" />