Stars.js

var Stars = function (props) {
  var {
    idx = 0,            // the index of this instance, as we only need to genenerate the <map> once!
    rating = 0,         // rating from 0 to 5, inclusive, in increments of 0.5
    color = "#f6b85c",  // the fill color
    label = null        // a label to describe the contents (for accessibility)
  } = props;

  var step = 18;
  var scale = 0.13;
  var w = Math.max(0, (rating * step) - 2);

  var mask = [0,1,2,3,4].map(function (i) {
    return (
      <g key={i} transform={"translate(" + (i * step / scale) + ")"}>
        <path d="M50,82 L27,94 C20,97 15,94 17,86 L21,61 L3,44 C-2,38 -0,32 7,31 L32,27 L43,5 C47,-1 53,-1 56,5 L67,27 L92,31 C100,32 102,38 96,44 L78,61 L82,86 C84,94 79,97 72,94 L50,82 Z" fill="#fff"/>
      </g>
    );
  });

  return (
    <svg width="90" height="13" aria-label={label} data-tooltip={label}>
      {idx === 0 && (
        <defs>
          <mask id="_stars">
            <g transform={"scale(" + scale + ")"}>
              {mask}
            </g>
          </mask>
        </defs>
      )}
      <rect width="90" height="13" fill="#ccc" mask={"url(#_stars)"}/>
      <rect width={w} height="13" fill={color} mask={"url(#_stars)"}/>
    </svg>
  );
};

module.exports = Stars;