yuru4c/phase.css

## phase.css

[data-phase] {
	position: relative;
	overflow: hidden;
	border: solid black;
	background-color: black;
}
[data-phase] *, [data-phase]:before {
	position: absolute;
	left: 0;
	height: 100%;
	background-color: white;
}

[data-phase], [data-phase] * {
	border-radius: 50%;
}
[data-phase] * {
	right: 0;
	margin: auto;
}
[data-phase]:before, [data-phase]:after {
	content: '';
}
[data-phase]:before {
	width: 50%;
}
[data-phase]:after {
	display: block;
	padding: 50% 0;
}

[data-phase="0"] *, [data-phase="3"] * {
	background-color: inherit;
}
[data-phase="0"]:before, [data-phase="1"]:before {
	left: 50%;
}

## phase.js

var Phase = (function ($) {
	var Math = this.Math;

	var period = 28, quarter = period / 4;
	var rad = Math.PI / (period / 2);

	function Phase(border, size) {
		this.element = $.createElement('div');
		if (border != null) this.element.style.borderWidth = border;
		if (size   != null) this.element.style.width = size;
		this._s = this.element.appendChild($.createElement('span')).style;
		this.set(0);
	}

	Phase.prototype.set = function (value) {
		value -= period * Math.floor(value / period);
		this.element.setAttribute('data-phase', ~~(value / quarter));
		this._s.width = Math.abs(Math.cos(value * rad)) * 100 + '%';
	};

	return Phase;
})(document);

## test.html
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Moon phase</title>
	<link rel="stylesheet" href="phase.css">

	<style>
		#container {
			margin: auto;
			max-width: 256px;
		}
		#value {
			font-size: x-large;
			text-align: center;
		}
	</style>
</head>
<body>

	<div id="container">
		<p id="value"></p>
	</div>

	<!-- <script src="moon.js"></script> -->
	<script src="phase.js"></script>
	<script>
		var val = document.getElementById('value');
		var phase = new Phase('4px');

		document.getElementById('container')
			.appendChild(phase.element);

		var intervalId = window.setInterval(function () {
			// /*
			var value = new Date() / 4000 * 28;
			/*/
			var value = moon.phase(new Date());
			val.innerHTML = value.toFixed(6);
			//*/
			phase.set(value);
		}, 1000 / 48);
	</script>
</body>
</html>

	[data-phase] {
	position: relative;
	overflow: hidden;
	border: solid black;
	background-color: black;
	}
	[data-phase] *, [data-phase]:before {
	position: absolute;
	left: 0;
	height: 100%;
	background-color: white;
	}

	[data-phase], [data-phase] * {
	border-radius: 50%;
	}
	[data-phase] * {
	right: 0;
	margin: auto;
	}
	[data-phase]:before, [data-phase]:after {
	content: '';
	}
	[data-phase]:before {
	width: 50%;
	}
	[data-phase]:after {
	display: block;
	padding: 50% 0;
	}

	[data-phase="0"] , [data-phase="3"] {
	background-color: inherit;
	}
	[data-phase="0"]:before, [data-phase="1"]:before {
	left: 50%;
	}

	var Phase = (function ($) {
	var Math = this.Math;

	var period = 28, quarter = period / 4;
	var rad = Math.PI / (period / 2);

	function Phase(border, size) {
	this.element = $.createElement('div');
	if (border != null) this.element.style.borderWidth = border;
	if (size != null) this.element.style.width = size;
	this._s = this.element.appendChild($.createElement('span')).style;
	this.set(0);
	}

	Phase.prototype.set = function (value) {
	value -= period * Math.floor(value / period);
	this.element.setAttribute('data-phase', ~~(value / quarter));
	this._s.width = Math.abs(Math.cos(value * rad)) * 100 + '%';
	};

	return Phase;
	})(document);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Moon phase</title>
	<link rel="stylesheet" href="phase.css">

	<style>
	#container {
	margin: auto;
	max-width: 256px;
	}
	#value {
	font-size: x-large;
	text-align: center;
	}
	</style>
	</head>
	<body>

	<div id="container">
	<p id="value"></p>
	</div>

	<!-- <script src="moon.js"></script> -->
	<script src="phase.js"></script>
	<script>
	var val = document.getElementById('value');
	var phase = new Phase('4px');

	document.getElementById('container')
	.appendChild(phase.element);

	var intervalId = window.setInterval(function () {
	// /*
	var value = new Date() / 4000 * 28;
	/*/
	var value = moon.phase(new Date());
	val.innerHTML = value.toFixed(6);
	//*/
	phase.set(value);
	}, 1000 / 48);
	</script>
	</body>
	</html>