star rating (clip-path)

dabblet.css

/**
 * star rating (clip-path)
 */

figure
{
	margin: 0;
	width: 100%;
	height: 0%;
	padding-top: 20%;
	position: relative;
}

meter
{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-clip-path: url(#clip-five-stars);
	clip-path: url(#clip-five-stars);
	background: hsl(230, 10%, 90%);
}
::-webkit-meter-bar
{
	background: hsl(230, 10%, 90%);
}

::-webkit-meter-optimum-value,
::-webkit-meter-suboptimum-value,
::-webkit-meter-even-less-good-value
{
	background: hsl(50, 90%, 60%);
}
::-moz-meter-bar
{
	background: hsl(50, 90%, 60%);
}

svg
{
	width: 0;
	height: 0;
}

dabblet.html

<figure>
	<meter min="0" max="5" optimum="5" high="4.5" value="3.5"></meter>
</figure>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<path id="star" d="M0 -1 L0.22 -0.31 0.95 -0.31 0.36 0.12 0.59 0.81 0 0.38 -0.59 0.81 -0.36 0.12 -0.95 -0.31 -0.22 -0.31Z"/>
		<clipPath id="clip-five-stars" clipPathUnits="objectBoundingBox">
			<use xlink:href="#star" transform="translate (0.1, 0.5) scale(0.09, 0.45)"/>
			<use xlink:href="#star" transform="translate (0.3, 0.5) scale(0.09, 0.45)"/>
			<use xlink:href="#star" transform="translate (0.5, 0.5) scale(0.09, 0.45)"/>
			<use xlink:href="#star" transform="translate (0.7, 0.5) scale(0.09, 0.45)"/>
			<use xlink:href="#star" transform="translate (0.9, 0.5) scale(0.09, 0.45)"/>
		</clipPath>
	</defs>
</svg>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}