<p class='tar'>Hello lets revolve my world, this is a spiral! </p>

<p class='tar2'>Hello lets revolve my world, this is a circle! </p>

<a href='#' class='tar3'>I am a semi circle</a>

a.fx-Revolve {
	&:focus {
		// outline: 0;
		box-shadow: 0 0 3pt 2pt #75ACF8;
		position: relative;
		outline: 0;
		&:before {
			border-radius: inherit;
			content: "";
			width: calc(100% - 2.2em);
			height: calc(100% - 2.2em);
			margin: 1em;
			box-shadow: inset 0 0 3pt 2pt #75ACF8;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
}

function revolveText (options = {
	target: undefined,
	span: 100,
	north: 0,
	spiral: false
}) {
	const { 
		target,
		span,
		north,
		spiral,
		size
	} = options;
	const message = target.textContent;
	const quaterWidth = target.clientWidth / 4;
	const diameter = size || quaterWidth;
	const messageChunks = message.split(String());
	const { length } = messageChunks;
	const offsetEnd = 1;
	const l = length + offsetEnd;
	const CIRC_MAX = 360;
	const PERC_MAX = 100;
	const ofDeg = span * CIRC_MAX / PERC_MAX;
	const ofNorth = north * CIRC_MAX / PERC_MAX;
	const segDeg = ofDeg / l;
	const fontSize = 16;
	let a = 0;
	let i = 0;
	
	target.setAttribute('style', `
		padding-left: ${diameter / 2}px;
		display: inline-block;
		width: ${diameter / 2}px;
		height: ${diameter}px;
		transform: rotate3d(0, 0, 1, -${segDeg + ofNorth}deg);
		border-radius: 9e9em;
		font-size: 1rem;
	`);
	target.classList.add('fx-Revolve');
	target.textContent = '';
	while (a < ofDeg) {
		a += segDeg;
		const charWrapper = document.createElement('span');
		charWrapper.textContent = messageChunks[i];
		i ++;
		charWrapper.classList.add('fx-RevolveCharWrap');
		charWrapper.setAttribute('style', `
			display: inline-block;
			transform: 
				rotate3d(0, 0, 1, ${a}deg) 
				${spiral ? 'translateY(' + (i) + 'px)': ''};
			${spiral ? 'font-size:' + (fontSize - (i / 10) ) + 'px': ''};
			position: absolute;
			height: ${diameter / 2}px;
			transform-origin: bottom left;
			font-size: 1em;
		`);
		target.appendChild(charWrapper);
	}
}


revolveText({
	target: document.querySelector('.tar'),
	span: 100, // percent
	north: 0, // cc rotate in percent
	spiral: true,
	size:300
});
revolveText({
	target: document.querySelector('.tar2'),
	span: 100, // percent
	north: 0, // cc rotate in percent
	spiral: false,
	size:200
	});

revolveText({
	target: document.querySelector('.tar3'),
	span: 50, // percent
	north: 0, // cc rotate in percent
	spiral: false,
	size: 200 // fixed size
});