Wheel of Fortune

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="spin_wrapper">
	<svg xmlns="http://www.w3.org/2000/svg" id="spin" width="100%" height="100%" viewBox="0 0 100 100"></svg>
</div>

SCSS

*,:before,:after{box-sizing:border-box;margin:0;padding:0;}

#spin_wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin-top: -150px;
	margin-left: -150px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #ffffff;
	box-shadow: 0px 2px 5px 1px rgba(0,0,0, 0.3);
	
	&:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 100%;
		width: 14px;
		height: 30px;
		margin-left: -7px;
		margin-bottom: -5px;
		border-style: solid;
		border-color: transparent;
		border-width: 7px;
		border-bottom: 0px;
		border-top: 30px solid #FFA514;
	}
}
#spin {
	transform-origin: 50% 50%;
}

JavaScript

window.requestAnimFrame = (function(){
		return  window.requestAnimationFrame       ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame    ||
			function(callback){window.setTimeout(callback, 1000 / 60);};
	})();


function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
    return {
        x: centerX + (radius * Math.cos(angleInRadians)),
        y: centerY + (radius * Math.sin(angleInRadians))
    };
}
function arcPath(x, y, radius, endradius, startAngle, endAngle) {
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var start2 = polarToCartesian(x, y, endradius, endAngle);
    var end2 = polarToCartesian(x, y, endradius, startAngle);
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
        "L", end2.x, end2.y,
        "A", endradius, endradius, 0, largeArcFlag, 1, start2.x, start2.y,
        "Z"
    ].join(" ");
    return d;
}

var spin = {
	slots: [
		{value:'A', value1:'lazada', color: '#7CB247'},
		{value:'B', value1:'zalora', color: '#CBDB20'},
		{value:'C', value1:'shopee', color: '#7CB247'},
		{value:'D', value1:'groupon', color: '#823572'},
		{value:'E', value1:'carousell', color: '#7CB247'},
		{value:'F', value1:'mudah', color: '#CBDB20'},
	],
	speed: 0,
	spinSpeed: 10,
	degree: 0,
	obj: null,
	stop: false,
	min_duration: 3000,
	max_duration: 8000,
	rand_speed: 0,
};

var spin_anim = function(){
	if ( spin.stop ) { return true; }
	spin.degree = filter_degree(spin.degree + spin.speed);
	spin.obj.css('transform', 'rotate(' + spin.degree + 'deg)');
	requestAnimFrame(spin_anim);
};

function filter_degree(d) {
	while (d<0){
		d += 360;
	}
	return (d%360);
}

function spin_start() {
	spin.stop = false;
	spin_anim();
	spin.rand_speed = Math.random();
	$( spin...