markup-example.html

<div class="block-stars" data-stars="6" data-is_predicted="true" data-title_id="228">
    <ul class="w3l-ratings" >
        <li>
            <div class="star" data-star_id="1">
                <svg
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink"
                 x="0px"
                 y="0px"
                 viewBox="0 0 8.7 16.7"
                 xml:space="preserve">

                    <path class="st0" d="M8.9,1.7L6,6.1L0.5,6.9l3.9,3.8l-0.9,5.5c1.8-1,3.6-1.9,5.4-2.9"/>
                </svg>
            </div>
            <div class="star" data-star_id="2">
                <svg
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 8.7 16.7"
                    xml:space="preserve">
                    <path class="st1" d="M8.9,1.7L6,6.1L0.5,6.9l3.9,3.8l-0.9,5.5c1.8-1,3.6-1.9,5.4-2.9"/>
                </svg>
            </div>
        </li>
        <!-- and so on 10 times -->
    </ul>
</div>

<!-- Initial coloring is made from server in path's style attribute -->