CSS SVG star rating ⭐️

Today we will be looking at making an SVG based star rating. In our example, we will be using three types of stars. (Empty. Half, and full).

Then we will be showcasing some examples of how to use them to show a specific rating.

The end result, as you can see on this Codepen.

Creating the SVG set

As mentioned we will be using three versions, and we will be using SVG Sprites to accomplish this.

<svg id="stars" style="display: none;" version="1.1">
  <symbol id="stars-empty-star" viewBox="0 0 102 18" fill="#F1E8CA">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-full-star" viewBox="0 0 102 18" fill="#D3A81E">
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218" />
  </symbol>
  <symbol id="stars-half-star" viewBox="0 0 102 18" fill="#D3A81E">
    <use xlink:href="#stars-empty-star" />
    <path d="M9.5 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9.5 0l2.792" />
  </symbol>
</svg>

As you can see we have the following:

• stars-empty-star: This is our has a very light gold background.
• stars-full-star: This is actually the same shape, but with a different color.
• stars-half-star: This is a combination of an empty star at the bottom, and a half star on top of it.

That's going to be our source, and we can use this in the following ways.

Using the SVG stars

The main question is, of course, how can we now showcase our stars?

Lets say you want to show a empty star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-empty-star" />
</svg>

Or a full star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
</svg>

Or even the half star:

<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-half-star" />
</svg>

That works, awesome!

But now we want to make a 5-star rating component, and SVG's tend to crawl on top of each other.

So if we have the following code:

<!-- 2.5 Rating -->
<svg aria-hidden="true" focusable="false" class="rating">
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-full-star" />
  <use xlink:href="#stars-half-star" />
  <use xlink:href="#stars-empty-star" />
  <use xlink:href="#stars-empty-star" />
</svg>

If all sits like this:

Hmm, weird? It only shows one star? Correct!

So let's use CSS to fix that.

use {
  &:nth-child(2) {
    transform: translate(20px);
  }
  &:nth-child(3) {
    transform: translate(40px);
  }
  &:nth-child(4) {
    transform: translate(60px);
  }
  &:nth-child(5) {
    transform: translate(80px);
  }
}

Every x child we give 20px offset position.

So now we get this:

You can find the rest of the combinations on the Codepen!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter