Radial SVG stuff for Courtney Averett

by Admiral Potato

HTML

<div id="holder">
	<svg id="svg"xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="-1 -1 2 2">
	</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 svg = document.getElementById("svg");
var ns = svg.namespaceURI;

var humanList = [
	"Bob",
	"Sally",
	"Joe",
	"Miranda",
	"Lacey",
	"Tom",
	"Sarah"
];

var catList = [
	"Pokey",
	"Lucky",
	"Mozzarella",
	"Ele",
	"Ajax",
	"Kevin the destroyer",
	"Pimento"
];


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

var makeFan = function(list, directionName){
	var n = list.length;
	var direction = directionMap[directionName];
	var maxDegrees = 90;
	list.forEach(function(item, index){
		var fract = index / n;
		var group =  document.createElementNS(ns, 'g');
		group.setAttribute("transform", "rotate("+ (maxDegrees * fract) +")");

		var text = makeText(item, direction);
		group.appendChild(text);
		svg.appendChild(group);

	});
};

var makeText = function(item, direction){
	var text =  document.createElementNS(ns, 'text');

	text.setAttribute('style', 'font-size: 0.05px; font-family: monospace');
	text.setAttribute('text-anchor', direction.textAnchor);
	text.setAttribute('x', 0.25 * direction.offset);
	text.setAttribute('y', 0);
	text.setAttribute('fill', "#f90");
	text.innerHTML = item;
	return text;
};

makeFan(humanList, "right");
makeFan(catList, "left");