fix radii to use %; add seconds

countdown.html

@@ -6,9 +6,10 @@
 		<div class="minutes" id="minutes"></div>
 	</div>
 	<svg id="arcs">
-		<circle class="years" id="yeararc" r="22vw" cx="50%" cy="50%"></circle>
-		<circle class="days" id="dayarc" r="24vw" cx="50%" cy="50%"></circle>
-		<circle class="hours" id="hourarc" r="25vw" cx="50%" cy="50%"></circle>
-		<circle class="minutes" id="minarc" r="25.65vw" cx="50%" cy="50%"></circle>
+		<circle class="years" id="yeararc" r="34%" cx="50%" cy="50%"></circle>
+		<circle class="days" id="dayarc" r="35.2%" cx="50%" cy="50%"></circle>
+		<circle class="hours" id="hourarc" r="36.2%" cx="50%" cy="50%"></circle>
+		<circle class="minutes" id="minarc" r="36.9%" cx="50%" cy="50%"></circle>
+		<circle class="seconds" id="secarc" r="37.4%" cx="50%" cy="50%"></circle>
 	</svg>
 </div>

css/countdown.scss

@@ -39,6 +39,11 @@
 	stroke: gold;
 }
 
+.seconds {
+	color: silver;
+	stroke: silver;
+}
+
 #days {
 	font-size: 8vw;
 }
@@ -65,16 +70,24 @@ svg circle {
 	fill: none;
 }
 
+svg circle.years {
+	stroke-width: 1.6%;
+}
+
 svg circle.days {
-	stroke-width: 1.2vw;
+	stroke-width: 1.2%;
 }
 
 svg circle.hours {
-	stroke-width: 0.8vw;
+	stroke-width: 0.8%;
 }
 
 svg circle.minutes {
-	stroke-width: 0.5vw;
+	stroke-width: 0.6%;
+}
+
+svg circle.seconds {
+	stroke-width: 0.4%;
 }
 
 @media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {

js/countdown.js

 function getTimeSince(startTime) {
 	var t = new Date() - startTime;
-	var seconds = Math.floor((t / 1000) % 60);
+	var seconds = (t / 1000 % 60);
 	var minutes = Math.floor((t / 1000 / 60) % 60);
 	var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
 	var days = Math.floor(t / (1000 * 60 * 60 * 24) % 365);
@@ -31,13 +31,7 @@ function updateArc(id, value, max) {
 	elem.setAttribute("stroke-dasharray", barLength + " " + circumference);
 }
 
-function initializeClock(id, startTime) {
-	var clock = document.getElementById(id);
-	var daysElem = clock.querySelector('#days');
-	var hoursElem = clock.querySelector('#hours');
-	var minutesElem = clock.querySelector('#minutes');
-
-	function plural(n, w, wp) {
+function plural(n, w, wp) {
 	if (n == 0) {
 		return '';
 	}
@@ -45,25 +39,34 @@ function initializeClock(id, startTime) {
 		return n + ' ' + w;
 	}
 	return n + ' ' + wp;
-	}
+}
+
+function initializeClock(id, startTime) {
+	var clock = document.getElementById(id);
+	var yearsElem = clock.querySelector('#years');
+	var daysElem = clock.querySelector('#days');
+	var hoursElem = clock.querySelector('#hours');
+	var minutesElem = clock.querySelector('#minutes');
 
 	function updateClock() {
 		var t = getTimeSince(startTime);
 
-		yearsElem.innerHTML = plural(t.years, 'year', 'years');
-		daysElem.innerHTML = plural(t.days, 'day', 'days');
-		hoursElem.innerHTML = plural(t.hours, 'hour', 'hours');
-		minutesElem.innerHTML = ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2);
-
+		secLength = t.seconds;
 		minLength = t.minutes + t.seconds/60;
 		hrLength = t.hours + minLength/60;
 		dayLength = t.days + hrLength/24;
 		yearLength = t.years + t.days/365;
 
-		updateArc("yeararc", dayLength, 365);
+		yearsElem.innerHTML = plural(t.years, 'year', 'years');
+		daysElem.innerHTML = plural(t.days, 'day', 'days');
+		hoursElem.innerHTML = plural(t.hours, 'hour', 'hours');
+		minutesElem.innerHTML = ('0' + t.minutes).slice(-2) + ':' + ('0' + Math.floor(t.seconds)).slice(-2);
+
+		updateArc("yeararc", yearLength, 100);
 		updateArc("dayarc", dayLength, 365);
 		updateArc("hourarc", hrLength, 24);
 		updateArc("minarc", minLength, 60);
+		updateArc("secarc", secLength, 60);
 
 		if (t.total <= 0) {
 			clearInterval(timeinterval);
@@ -71,7 +74,7 @@ function initializeClock(id, startTime) {
 	}
 
 	updateClock();
-	var timeinterval = setInterval(updateClock, 1000);
+	var timeinterval = setInterval(updateClock, 100);
 }
 
 var deadline = new Date('2019-12-22T08:40+0530');