Radial SVG stuff but it's Vue

by Admiral Potato

HTML

<div id="app-holder">
	<svg id="svg"xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="-1 -1 2 2">
    <g
      v-for="item in combinedList"
     :transform="`rotate(${item.angle})`" 
    >
      <text
        y="0"
        :x="item.x"
        fill="#f90"
        :text-anchor="item.textAnchor"
        style="font-size: 0.05px; font-family: monospace"
      >{{item.text}}</text>
    </g>
	</svg>
</div>

CSS

*{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
html, body{
	height: 100%;
	font-family: sans-serif;
	font-size: 12px;
	line-height: 24px;
	color: #fff;
	background: #000;
}
#holder{
	position: absolute;
	display: block;
	width: 480px;
	height: 480px;
	border: 1px solid #666;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

JavaScript

var directionMap = {
	left: {
		offset: 1,
		textAnchor: 'start'
	},
	right: {
		offset: -1,
		textAnchor: 'end'
	},
}

var app = new Vue({
	el: '#app-holder',
  data: {
  	humanList: [
      "Bob",
      "Sally",
      "Joe",
      "Miranda",
      "Lacey",
      "Tom",
      "Sarah"
    ],
    catList: [
      "Pokey",
      "Lucky",
      "Mozzarella",
      "Ele",
      "Ajax",
      "Kevin the destroyer",
      "Pimento"
    ]
  },
  computed: {
  	combinedList () {
    	var result = []
      this.direction = 'right'
      var mergedHumanList = this.humanList.map(this.mapArray)
      this.direction = 'left'
      var mergedCatList = this.catList.map(this.mapArray)
    	result = [
      	...mergedHumanList,
      	...mergedCatList
      ]
      console.log({result})
      return result
    }
  },
  methods: {
  	mapArray (item, index, list) {
      var n = list.length;
      var direction = directionMap[this.direction];
      var maxDegrees = 90;
      var fract = index / n;
    	return {
      	textAnchor: direction.textAnchor,
        x: 0.25 * direction.offset,
      	angle: maxDegrees * fract,
        text: item
      }
    }
  }
})