Responsive Countdown timer with SVG

5 min readSep 17, 2023

Here’s how we can create a custom responsive countdown timer using just the SVG, without using any library.

Screenshot of how the countdown timer looks

Note — I am using React for the purpose of this post. The basic SVG logic remains the same. You can use the same logic in the framework of your choice.

Here’s how we will go through how to create this countdown timer -

SVG elements being used
Understand the SVG setup
Drawing circle
Drawing an arc for the remaining time
Adding text inside the SVG
Implementation with React

1. SVG elements being used

First, lets understand a bit about the tags we will be using for creating the timer.

svg — svg tag is the container for the whole SVG image we will be creating. For more details about SVG, refer this — https://developer.mozilla.org/en-US/docs/Web/SVG.
path — we will be using path to render the arc of the time remaining while the timer is ticking.
circle — This tag is used at 2 places. At the initial load, we will have the filled circle mentioning the timer is yet to start. We will be using circle to render the outer ring as well.
text — to show the remaining time

2. Understand the SVG setup

The SVG has it’s viewBox to render the elements inside. Let’s say we have a viewBox of 100x100, then all the elements inside the SVG will be relative to the viewBox. Even if we scale up or down, the SVG will not misalign any elements.

Here, we are using SVG viewBox of size 160x160. The same is declare with -

<svg viewBox={`0 0 160 160`}>

The center point of the SVG will be 80,80.

3. Drawing circle

We will need to show a complete circle when we are just about the countdown. Something like this -

Full circle when the timer is about to start

We need 2 circles -

The outer ring of the timer, which is in grey color
Inner circle filled with skyblue color

The inner blue circle is required only for the first second. This is to show that the timer has not started yet.

4. Drawing an arc for the remaining time

When the countdown starts, we need to render the arc for the remaining time. When 1 second is elapsed, the timer will be rendered as shown in the picture below -

We need to calculate the central angle of the arc for us to draw the arc. In this case, the central angle of the arc is 360 * (59/60) = 354 degrees. Once we know the angle, we can calculate the co-ordinates & use path to render the filled arc. We can define the path to be drawn using d attribute of the path element.

We can split the path followed as follows -

M — move to the starting position

A — to draw the arc

L — to draw the first vertical line till the center from the top

L — to draw the second line from the center to arc end

For 59 seconds remaining out of 60, we have following path -

<path fill="skyblue" d="M 71.63772293858773 0.43824837053813326 A 80 80 0 1 0 80 0 L 80 80 L 71.63772293858773 0.43824837053813326" />

Let’s understand the string passed to d .

“M 71.63772293858773 0.43824837053813326 A 80 80 0 1 0 80 0 L 80 80 L 71.63772293858773 0.43824837053813326”

So this is how the path draws this arc.

M 71.63772293858773 0.43824837053813326 — move to co-ordinates 71.63772293858773, 0.43824837053813326 in the viewBox of size 160x160, which is set in svg.
A 80 80 0 1 0 80 0– From co-ordinates 71.637…, 0.438…, start the elliptical arc with radii 80 & 80, with 0 angle w.r.t. to x axis, having a large arc, with counterclockwise turn, till the co-ordinates 80,0. We are using counterclockwise turn in the timer, but this can be changed if the expected direction is reverse.
L 80 80 — Draw a line from co-ordinates 0,80 to co-ordinates 80,80
L 71.63772293858773 0.43824837053813326 — Draw a line from co-ordinates 80,80 to co-ordinates 71.63772293858773 0.43824837053813326

Once we draw the arc, we need can fill it with the color of our choice, which is skyblue in this case.

We need to repeat this process for every second. This arc will be recalculated & redrawn every second.

5. Adding text inside the SVG

Why do we need to include text inside the SVG when we have the HTML tags to add text however we want ? Well, the outer HTML tag for text will not be as responsive as the SVG. For the responsiveness of the text, we will have to add some tweaks.

But, if we have the text as part of the SVG, the whole text rendering will be inside the viewBox, and it will also be scaled up & down relative to the size of the SVG.

The remaining time 59 Seconds is rendered with text element of the SVG. We will be placing 59 a bit above the center with larger font size & bold font weight, and Seconds a bit below the center with smaller font size.

With this, when we are resizing the SVG, the text will also resize relative to the SVG.

6. Implementation with React

Now that we have the approach for the implementation, lets implement it. Following Codepen has the implementation for the same in React. Try resizing the timer, and see the effect.

The logic remains the same in other frameworks as well -

We need to keep track of the time remaining, and calculating the arc for each second.

Calculating the arc can be done as follow -

Calculate angle in radians for the remaining time
Find the co-ordinate of the arc’s starting point
Find the co-ordinate of the arc’s ending point
var x = centerX + radius * Math.cos(angleInRadians); var y = centerY + radius * Math.sin(angleInRadians);
Define the path in the format — M A L L
Draw the arc

We need to repeat this process for each second, or the time unit preferred.