Change var initialOffset = 351;

Your initialOffsetValue is string and your are doing division on it. so convert it to integer will resolve flickering issue.

Codepen

I am having some trouble implementing this countdown timer in HTML. It works for the most part, but it seems to flip out in the begging and at ~ i=14. I am not too sure what is causing this. I am thinking that the variables are not setting before the svg tries running but I am not sure of a way to fix this.

    <div>
        <div class="item">
            <h2>0</h2>
            <svg width="120" height="120" >
            <g>
            <title>Layer 1</title>
            <circle id="circle" class="circle_animation" r="56" cy="60" cx="60" stroke-width="8" stroke="#6fdb6f" fill="none"/>
            </g>
            </svg>
        </div>
        <div class="item">
            <h2>0</h2>
            <svg width="120" height="120" >
            <g>
            <title>Layer 1</title>
            <circle id="circle" class="circle_animation" r="56" cy="60" cx="60" stroke-width="8" stroke="#6fdb6f" fill="none"/>
            </g>
            </svg>
        </div>
    </div>
    <script>
        window.$ = window.jQuery = require('jquery');
        setTimeout(function() { 
            var time = 500; /* how long the timer will run (seconds) */
            var initialOffset = '351';
            var i = 1;

            /* Need initial run as interval hasn't yet occured... */
            $('.circle_animation').css('stroke-dashoffset', initialOffset+((i)*(initialOffset/time)));

            var interval = setInterval(function() {
                $('h2').text(time - i);
                if (i === time) {   
                    clearInterval(interval);
                    return;
                }

                $('.circle_animation').css('stroke-dashoffset', initialOffset+((i+1)*(initialOffset/time)));               
                
                i++;  
            }, 1000);
 
        }, 0)
    </script>

/*css*/

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align: center;
    position: absolute;
    line-height: 90px;
    width: 100%;
}

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

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