SCSS

HTML

<div class="average-star-rating" style="--rating: 3.7;">
        </div>

SCSS

:root {
        --star-size: 30px;
        --star-off-color: #cccccc;
        --star-on-color: #fc0;
    }

    .average-star-rating {
        --percent: calc(var(--rating) / 5 * 100%);
    
        display: inline-block;
        font-size: var(--star-size);
        font-family: Times; // make sure ★ appears correctly
        line-height: 1;
    
        &::before {
            content: "★★★★★";
            letter-spacing: 3px;
            background: linear-gradient(
                90deg,
                var(--star-on-color) var(--percent),
                var(--star-off-color) var(--percent)
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }