svg pie

make a svg pie

<template>
  <section>
    <svg class="" height="20" width="20" viewBox="0 0 20 20">
      <circle r="10" cx="10" cy="10" fill="white" />
      <circle v-for="(item, index) in pie" :key="index" r="5" cx="10" cy="10" fill="transparent"
          stroke="tomato"
          stroke-width="10"
          :stroke-dasharray="item.width + ' 31.42'"
          :transform="'rotate(' + item.rotate + ')'" />
      <circle r="5" cx="10" cy="10" fill="white" stroke-width="0"/>
    </svg>
  </section>
</template>

<script>
  export default {
    computed: {
      pie() {
        let numbers = [ 55, 30, 15  ]
        let pieNumbers = [
          {
            width: numbers[0] * 31.42 / 100 - 0.2,
            radius: ((numbers[0] * 31.42 / 100) * 360 / 31.42),
            rotate: -90
          }
        ]
        numbers.slice(1, numbers.length).map( x => pieNumbers.push({
          width: x * 31.42 / 100 - 0.2,
          radius: ((x * 31.42 / 100) * 360 / 31.42),
          rotate: pieNumbers[pieNumbers.length-1].rotate + pieNumbers[pieNumbers.length-1].radius
        }))
        return pieNumbers
      }
    }
  }
</script>