donut chart с анимацией

Здравсвуйте!

Необходимо реализовать donut chart для skills, как на изображении.

Сложность первая: с визуальной стороны, как "перевернуть" анимацию, чтобы она начиналась из верхнего правого угла.

Вопрос второй: с технической стороны, как реализовать, чтобы при перемене значения в div class="donut_value" менялось значение в donut_circle_value stroke-dashoffset="..."?

https://jsfiddle.net/xpvt214o/305391/

<div id="donut">
<div class="donut" style="margin-left:50px">
<svg class="circle-chart" viewbox="0 0 35 35" width="300" height="300" xmlns="http://www.w3.org/2000/svg" style="position:absolute;">
  <circle class="donut_background" stroke="#E9E9E9" stroke-width="0.5" fill="none" stroke-linecap="round" stroke-dasharray="85,100" cx="17.5" cy="17.5" r="15.91549431"/>
  <circle class="donut_circle_value" stroke="#2a8679" stroke-width="0.5" stroke-dasharray="70,100" stroke-dashoffset="70" stroke-linecap="round" fill="none" cx="17.5" cy="17.5" r="15.91549431" />
</svg>
<div class="donut_value" style="color:#2a8679; left:250px; top:80px;">70</div>
</div>  
</div>