{{!-- to see a representation of the image, add style="height:14px;width:14px" to svg tag --}}
<svg id="star-svg-container">
	<defs>
		<style type="text/css">
			#star-svg-container {
				width: 14px;
				height: 14px;
			}
			#star-path {
				stroke: #77bc43;
				stroke-width: 1;
			}

			#star-gradient-first-stop {
				stop-color: #77bc43;
			}

			#star-gradient-second-stop {
				stop-color: white;
				stop-opacity: 0;
			}
		</style>
		<linearGradient id="{{:~id}}-{{:~index}}">
			<stop offset="{{:~percent}}" id="star-gradient-first-stop" />
			<stop offset="{{:~percent}}" id="star-gradient-second-stop" />
		</linearGradient>
	</defs>
	<path d="M8.6,5l4.2,0.4L9.7,8.3l1,4.2L7,10.3l-3.6,2.2l1-4.2L1.2,5.5L5.4,5l1.6-3.8L8.6,5z"
		  fill="url(#{{:~id}}-{{:~index}})" id="star-path" />
</svg>