<div id="wrapper">
  <h2>WooCommerce SVG Star Rating</h2>
  <p>Retina ready and easy customizable</p>
  <div class="star-rating">
    <span style="width:0%"></span>
  </div>
  <div class="star-rating">
    <span style="width:45%"></span>
  </div>
  <div class="star-rating">
    <span style="width:72%"></span>
  </div>
</div>
@ratingSize: 250px;
@starActive: escape('#1F99CD');
@starInactive: escape('#082532');

.star-rating {
    height: (@ratingSize/5);
    position: relative;
    width: @ratingSize;
    &:before {
        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20@{starInactive}%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: repeat-x;
        background-size: (@ratingSize/5);
        bottom: 0;
        content: "";
        display: block;
        height: (@ratingSize/5);
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: @ratingSize;
    }
    > span {
        display: block;
        text-indent: -10000px;
        width: @ratingSize;
        height: (@ratingSize/5);
        position: absolute;
        overflow: hidden;
        &:before {
            background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20@{starActive}%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E") !important;
            background-repeat: repeat-x;
            background-size: (@ratingSize/5);
            bottom: 0;
            content: "";
            display: block;
            height:(@ratingSize/5);
            left: 0;
            position: absolute;
            right: 0;
            text-indent: 10000px;
            top: 0;
        }
    }
}

// Codepen Layout
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background: #34495E;
  line-height:1.5rem;
  color: #ffffff;
  #wrapper {
    text-align:center;
    margin:0 auto;
    max-width:500px;
    padding:50px 0;
    h2 {
      margin: 0 0 5px 0; 
    }
    p {
      margin: 0 0 25px;
    }
    .star-rating {
      margin: 0 auto (@ratingSize * 0.05);
    }
  }
}
@starActive: escape('#1F99CD');
@starInactive: escape('#082532');

.star-rating {
    height: (@ratingSize/5);
    position: relative;
    width: @ratingSize;
    &:before {
        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20@{starInactive}%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: repeat-x;
        background-size: (@ratingSize/5);
        bottom: 0;
        content: "";
        display: block;
        height: (@ratingSize/5);
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: @ratingSize;
    }
    > span {
        display: block;
        text-indent: -10000px;
        width: @ratingSize;
        height: (@ratingSize/5);
        position: absolute;
        overflow: hidden;
        &:before {
            background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20@{starActive}%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E") !important;
            background-repeat: repeat-x;
            background-size: (@ratingSize/5);
            bottom: 0;
            content: "";
            display: block;
            height:(@ratingSize/5);
            left: 0;
            position: absolute;
            right: 0;
            text-indent: 10000px;
            top: 0;
        }
    }
}

// Codepen Layout
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background: #34495E;
  line-height:1.5rem;
  color: #ffffff;
  #wrapper {
    text-align:center;
    margin:0 auto;
    max-width:500px;
    padding:50px 0;
    h2 {
      margin: 0 0 5px 0; 
    }
    p {
      margin: 0 0 25px;
    }
    .star-rating {
      margin: 0 auto (@ratingSize * 0.05);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.