SOURCE

var deg = 0;

window.onload = function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(10,10);

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="#e29c45";
ctx.beginPath();
ctx.moveTo(87.87,0);
ctx.lineTo(212.13,0);
ctx.lineTo(300,87.87);
ctx.lineTo(300,212.13);
ctx.lineTo(212.13,300);
ctx.lineTo(87.87,300);
ctx.lineTo(0,212.13);
ctx.lineTo(0,87.87);
ctx.closePath();
ctx.fill();
ctx.shadowBlur=0;


function bagua(num){
	var gnum = [0,4,5,6,7,3,2,1];
	ctx.save();
	var x,y,angle;
	angle = 360 - num * 45;
	x = 150 - 125 * Math.sin(angle/180*Math.PI);
	y = 150 - 125 * Math.cos(angle/180*Math.PI);
	ctx.fillStyle="#FFF";
	ctx.beginPath();
	ctx.translate(x,y);
	ctx.rotate((360 - angle)*Math.PI/180);
	ctx.translate(-x,-y);
	//ctx.fillRect(x - 20,y - 10,40,20);
	//ctx.font="20px Georgia";
	//ctx.fillText(valueAtBit(gnum[num],3) + valueAtBit(gnum[num],2) + valueAtBit(gnum[num],1),x,y);
	ctx.lineWidth=2;
	for (var i = 0;i < 3;i++){
		if (valueAtBit(gnum[num],i + 1)){
			ctx.beginPath();
			ctx.moveTo(x - 20,y + (i - 1) * 10);
			ctx.lineTo(x - 5,y + (i - 1) * 10)
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(x + 5,y + (i - 1) * 10);
			ctx.lineTo(x + 20,y + (i - 1) * 10)
			ctx.stroke();
		}else{
			ctx.beginPath();
			ctx.moveTo(x - 20,y + (i - 1) * 10);
			ctx.lineTo(x + 20,y + (i - 1) * 10)
			ctx.stroke();
		}
	}
	ctx.restore();
}

for (var i = 0;i < 8;i++){
	bagua(i);
}

function valueAtBit(num, bit) {
    return (num >> (bit -1)) & 1;
}

function yinyang(){
	ctx.fillStyle="#FFF";
	ctx.beginPath();
	ctx.arc(150,150,100,deg/180*Math.PI,(deg+180)/180*Math.PI);
	ctx.fill();
	ctx.fillStyle="#000";
	ctx.beginPath();
	ctx.arc(150,150,100,(deg-180)/180*Math.PI,deg/180*Math.PI);
	ctx.fill();
	ctx.fillStyle="#FFF";
	ctx.beginPath();
	ctx.arc(150 - 50 * Math.sin((90 - deg)/180*Math.PI),150 - 50 * Math.cos((90 - deg)/180*Math.PI),50,0,2*Math.PI);
	ctx.fill();
	ctx.fillStyle="#000";
	ctx.beginPath();
	ctx.arc(150 + 50 * Math.sin((90 - deg)/180*Math.PI),150 + 50 * Math.cos((90 - deg)/180*Math.PI),50,0,2*Math.PI);
	ctx.fill();
	ctx.fillStyle="#000";
	ctx.beginPath();
	ctx.arc(150 - 50 * Math.sin((90 - deg)/180*Math.PI),150 - 50 * Math.cos((90 - deg)/180*Math.PI),20,0,2*Math.PI);
	ctx.fill();
	ctx.fillStyle="#FFF";
	ctx.beginPath();
	ctx.arc(150 + 50 * Math.sin((90 - deg)/180*Math.PI),150 + 50 * Math.cos((90 - deg)/180*Math.PI),20,0,2*Math.PI);
	ctx.fill();
	
	deg += 3;
	if (deg >= 360){deg = 0;}
	window.requestAnimationFrame(yinyang);
}
window.requestAnimationFrame(yinyang);

}

<div>
	<canvas id="myCanvas" width="320" height="320"></canvas>
</div>

* {margin:0 auto; padding:0;list-style:none;text-decoration:none;}
body {background:#0e7142;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
body:after {content:'v1.0_0214';position:fixed;left:0;bottom:0;color:#0C6138;line-height:16px;font-size:12px;}
div {width:320px;height: 320px;position: fixed; margin:auto;top: 0;bottom: 0;left: 0;right: 0;}