Radial SVG stuff but it's Vue and just data

by Admiral Potato

HTML

<script src="https://unpkg.com/vue@2"></script>
<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 app = new Vue({
	el: '#app-holder',
  data: {
  	combinedList: [
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 0,
        "text": "Bob from the net"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 12.857142857142856,
        "text": "Sally"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 25.71428571428571,
        "text": "Joe"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 38.57142857142857,
        "text": "Miranda"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 51.42857142857142,
        "text": "Lacey"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 64.28571428571429,
        "text": "Tom"
      },
      {
        "textAnchor": "end",
        "x": -0.25,
        "angle": 77.14285714285714,
        "text": "Sarah"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 0,
        "text": "Pokey"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 12.857142857142856,
        "text": "Lucky"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 25.71428571428571,
        "text": "Mozzarella"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 38.57142857142857,
        "text": "Ele"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 51.42857142857142,
        "text": "Ajax"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 64.28571428571429,
        "text": "Kevin the destroyer"
      },
      {
        "textAnchor": "start",
        "x": 0.25,
        "angle": 77.14285714285714,
        "text": "Pimento"
      }
    ]
  }
})