h1 No special class for color change
.rating__output
  meter(max="100", id="demoMeter", value="50", min="0", low="50", optimum="40", high="75")
    div.meter-gauge
      span(id="demoMeterFallback", style="width:50%;")
  svg(version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", x="0px", y="0px", viewBox="0 0 200 40", enable-background="new 0 0 200 40", xml:space="preserve")
    polygon(stroke="none", points="57.1,15.7 43.5,16.3 41.7,16.3 28.1,15.7 22.3,0 62.9,0")
    polygon(stroke="none", points="95.5,15.7 81.9,16.3 80.1,16.3 66.5,15.7 60.6,0 101.3,0")
    polygon(stroke="none", points="133.8,15.7 120.3,16.3 118.4,16.3 104.9,15.7 99,0 139.7,0")
    polygon(stroke="none", points="172.2,15.7 158.7,16.3 156.9,16.3 143.3,15.7 137.4,0 178.1,0")
    polygon(stroke="none", points="18.7,15.7 0,16.5 0,0 24.5,0")
    polygon(stroke="none", points="181.7,15.7 200,16.5 200,0 175.8,0")
    polygon(stroke="none", points="11.5,40 0,40 0,12.3 15.8,24.7")
    polygon(stroke="none", points="188.9,40 200,40 200,12.5 184.6,24.7")
    polygon(stroke="none", points="23.4,30.2 8.7,40 37.8,40.1")
    polygon(stroke="none", points="61.8,30.2 47.1,40 76.4,40")
    polygon(stroke="none", points="100.2,30.2 85.5,40 114.8,40")
    polygon(stroke="none", points="138.6,30.2 123.9,40 153.2,40")
    polygon(stroke="none", points="176.9,30.2 162.3,40 191.6,40")
    polygon(stroke="none", points="49.8,40 35.3,40 31,24.7 41.7,16.3 43.5,16.3 54.2,24.7")
    polygon(stroke="none", points="88.2,40 73.7,40 69.4,24.7 80.1,16.3 81.9,16.3 92.5,24.7")
    polygon(stroke="none", points="126.6,40 112.1,40 107.8,24.7 118.4,16.3 120.3,16.3 130.9,24.7")
    polygon(stroke="none", points="165,40 150.5,40 146.2,24.7 156.8,16.3 158.7,16.3 169.3,24.7")
h1 Dynamic - try to change value
.rating__output
  meter(max="100", id="meter", value="50", min="0", low="50", optimum="40", high="75")
    div.meter-gauge
      span(id="meterFallback", style="width:50%;")
  input(type="range", id="inputMeter", min="1", value="50", max="100", step="1")
  svg(version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", x="0px", y="0px", viewBox="0 0 200 40", enable-background="new 0 0 200 40", xml:space="preserve")
    polygon(stroke="none", points="57.1,15.7 43.5,16.3 41.7,16.3 28.1,15.7 22.3,0 62.9,0")
    polygon(stroke="none", points="95.5,15.7 81.9,16.3 80.1,16.3 66.5,15.7 60.6,0 101.3,0")
    polygon(stroke="none", points="133.8,15.7 120.3,16.3 118.4,16.3 104.9,15.7 99,0 139.7,0")
    polygon(stroke="none", points="172.2,15.7 158.7,16.3 156.9,16.3 143.3,15.7 137.4,0 178.1,0")
    polygon(stroke="none", points="18.7,15.7 0,16.5 0,0 24.5,0")
    polygon(stroke="none", points="181.7,15.7 200,16.5 200,0 175.8,0")
    polygon(stroke="none", points="11.5,40 0,40 0,12.3 15.8,24.7")
    polygon(stroke="none", points="188.9,40 200,40 200,12.5 184.6,24.7")
    polygon(stroke="none", points="23.4,30.2 8.7,40 37.8,40.1")
    polygon(stroke="none", points="61.8,30.2 47.1,40 76.4,40")
    polygon(stroke="none", points="100.2,30.2 85.5,40 114.8,40")
    polygon(stroke="none", points="138.6,30.2 123.9,40 153.2,40")
    polygon(stroke="none", points="176.9,30.2 162.3,40 191.6,40")
    polygon(stroke="none", points="49.8,40 35.3,40 31,24.7 41.7,16.3 43.5,16.3 54.2,24.7")
    polygon(stroke="none", points="88.2,40 73.7,40 69.4,24.7 80.1,16.3 81.9,16.3 92.5,24.7")
    polygon(stroke="none", points="126.6,40 112.1,40 107.8,24.7 118.4,16.3 120.3,16.3 130.9,24.7")
    polygon(stroke="none", points="165,40 150.5,40 146.2,24.7 156.8,16.3 158.7,16.3 169.3,24.7")
h1 Svg star rating with <meter> element
-each val in [100, 95, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25, 20, 15, 10, 5]
  .rating__output
    meter(max="100", value=val, min="0", low="50", optimum="40", high="75")
      div.meter-gauge
        span(style="width:#{val}%;")
    svg(version="1.1", xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", x="0px", y="0px", viewBox="0 0 200 40", enable-background="new 0 0 200 40", xml:space="preserve")
      polygon(stroke="none", points="57.1,15.7 43.5,16.3 41.7,16.3 28.1,15.7 22.3,0 62.9,0")
      polygon(stroke="none", points="95.5,15.7 81.9,16.3 80.1,16.3 66.5,15.7 60.6,0 101.3,0")
      polygon(stroke="none", points="133.8,15.7 120.3,16.3 118.4,16.3 104.9,15.7 99,0 139.7,0")
      polygon(stroke="none", points="172.2,15.7 158.7,16.3 156.9,16.3 143.3,15.7 137.4,0 178.1,0")
      polygon(stroke="none", points="18.7,15.7 0,16.5 0,0 24.5,0")
      polygon(stroke="none", points="181.7,15.7 200,16.5 200,0 175.8,0")
      polygon(stroke="none", points="11.5,40 0,40 0,12.3 15.8,24.7")
      polygon(stroke="none", points="188.9,40 200,40 200,12.5 184.6,24.7")
      polygon(stroke="none", points="23.4,30.2 8.7,40 37.8,40.1")
      polygon(stroke="none", points="61.8,30.2 47.1,40 76.4,40")
      polygon(stroke="none", points="100.2,30.2 85.5,40 114.8,40")
      polygon(stroke="none", points="138.6,30.2 123.9,40 153.2,40")
      polygon(stroke="none", points="176.9,30.2 162.3,40 191.6,40")
      polygon(stroke="none", points="49.8,40 35.3,40 31,24.7 41.7,16.3 43.5,16.3 54.2,24.7")
      polygon(stroke="none", points="88.2,40 73.7,40 69.4,24.7 80.1,16.3 81.9,16.3 92.5,24.7")
      polygon(stroke="none", points="126.6,40 112.1,40 107.8,24.7 118.4,16.3 120.3,16.3 130.9,24.7")
      polygon(stroke="none", points="165,40 150.5,40 146.2,24.7 156.8,16.3 158.7,16.3 169.3,24.7")