Wheel of Fortune

by PhilQ

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', color: '#7CB247'},
		{value:'B', color: '#CBDB20'},
		{value:'C', color: '#7CB247'},
		{value:'D', color: '#823572'},
		{value:'E', color: '#7CB247'},
		{value:'F', color: '#CBDB20'},
		{value:'G', color: '#7CB247'},
		{value:'H', color: '#CBDB20'},
		{value:'I', color: '#EC7009'},
		{value:'J', color: '#CBDB20'},
		{value:'K', color: '#7CB247'},
		{value:'L', color: '#CBDB20'},
		{value:'M', color: '#7CB247'},
		{value:'N', color: '#1C86B5'},
		{value:'O', color: '#7CB247'},
		{value:'P', color: '#CBDB20'},
		{value:'Q', color: '#7CB247'},
		{value:'R', color: '#CBDB20'},
		{value:'S', color: '#CC1E82'},
		{value:'T', 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 (...