wnas/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
/*
	set up the widget
*/
.rating {
	display: block;
	position: relative;
}


/*
	hide the text visually
*/
.rating__text {
	position: absolute;
	left: -999em;
}


.star {
	fill : #ccc;
	display: inline-block;
}

.star[data-rating="checked"]{
	fill: #000;
}
</style>
</head>
<body>
<h1>rating</h1>
	<span class="rating">

	<span class="rating__text"><span class="rating__score" data-val="2">Two</span> out of <span class="rating__scale" data-val="3">three</span> stars</span>
		<span class="rating__stars" aria-hidden="true">
		<svg height="25" width="23" class="star rating__checked" data-rating="checked">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>  </svg>
			<svg height="25" width="23" class="star rating__checked" data-rating="checked">
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>  </svg>
				<svg height="25" width="23" class="star rating" >
    <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/>  </svg>
		</span>
	</span>


<script id="jsbin-source-css" type="text/css">/*
	set up the widget
*/
.rating {
	display: block;
	position: relative;
}


/*
	hide the text visually
*/
.rating__text {
	position: absolute;
	left: -999em;
}


.star {
	fill : #ccc;
	display: inline-block;
}

.star[data-rating="checked"]{
	fill: #000;
}</script>
</body>
</html>

## jsbin.pecubas.css
/*
	set up the widget
*/
.rating {
	display: block;
	position: relative;
}


/*
	hide the text visually
*/
.rating__text {
	position: absolute;
	left: -999em;
}


.star {
	fill : #ccc;
	display: inline-block;
}

.star[data-rating="checked"]{
	fill: #000;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	/*
	set up the widget
	*/
	.rating {
	display: block;
	position: relative;
	}


	/*
	hide the text visually
	*/
	.rating__text {
	position: absolute;
	left: -999em;
	}


	.star {
	fill : #ccc;
	display: inline-block;
	}

	.star[data-rating="checked"]{
	fill: #000;
	}
	</style>
	</head>
	<body>
	<h1>rating</h1>
	<span class="rating">

	<span class="rating__text"><span class="rating__score" data-val="2">Two</span> out of <span class="rating__scale" data-val="3">three</span> stars</span>
	<span class="rating__stars" aria-hidden="true">
	<svg height="25" width="23" class="star rating__checked" data-rating="checked">
	<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/> </svg>
	<svg height="25" width="23" class="star rating__checked" data-rating="checked">
	<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/> </svg>
	<svg height="25" width="23" class="star rating" >
	<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78"/> </svg>
	</span>
	</span>


	<script id="jsbin-source-css" type="text/css">/*
	set up the widget
	*/
	.rating {
	display: block;
	position: relative;
	}


	/*
	hide the text visually
	*/
	.rating__text {
	position: absolute;
	left: -999em;
	}


	.star {
	fill : #ccc;
	display: inline-block;
	}

	.star[data-rating="checked"]{
	fill: #000;
	}</script>
	</body>
	</html>