I have been trying to reverse the countdown in this demo from 10 down to zero Without luck.

I have tried reversing the countdown by doing this: 

```
(1*(initialOffset/time))-initialOffset )

```

It did reverse the animated circle but not the countdown. 

Any ideas? 

Thanks 

```js
var time = 10;
var initialOffset = '440';
var i = 1

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

var interval = setInterval(function() {
    $('h2').text(i);
    if (i == time) {   
        clearInterval(interval);
        return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);
```

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

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

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

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

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
        <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
    </svg>
</div>
```

Here is also a codepen copy: 

<https://codepen.io/kaolay/pen/LRVxKd>