Circular timer sgv html js css, when making it bigger, the lines don't match up to the size

Question

I have a circular timer done with js, css and html using svg. When i make the timer bigger, the lines don't match up with the timer so there is always a gap in the circular timer. How do i make the line that is drawn bigger to complete a full circle?

HTML

        <div id="timer" style="height: 44px">
    <div class="item html">
        <h2 style="left: 0px; top: 28px">1200</h2>
        <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
         <g>
          <title>Layer 1</title>
          <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#be1e2d" fill="none"/>
         </g>
        </svg>
    </div>
    </div>

Javascript

    var mins = 20;
    var seconds = mins * 60; /* how long the timer runs for */
    var initialOffset = '440';
    var i = -1200;
    var interval = setInterval(


    function() {
        $('.circle_animation').css('stroke-dashoffset', initialOffset-(i*(initialOffset/seconds)));
        $('h2').text(Math.abs(i));
        if (i == 0) {
            clearInterval(interval);
        }
        i++;  
    }, 1000);

CSS

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 125px;
    width: 100%;
    color: #FFFFFF;
    left: 31px;
    top: 24px;
    height: 98px;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

Answer 1

Leave the circle radius alone, add a viewBox attribute to the <svg> element viewBox="0 0 160 160" then you can change the svg height/width as you wish and the circle will automatically scale without changing the radius at all.