// style

<style>
  #rating-container {
    padding-top: 1rem;
  }

  .skull-rating {
    display: flex;
    gap: 5px;
  }

  .skull {
    height: 18px;
    width: 18px;
    position: relative;
  }
</style>

// html

<div id="rating-container"></div>

// js

<script>
  const skullSvg = `
    <svg fill="currentColor" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="skull-clip-{index}">
          <rect x="0" y="0" width="{width}" height="22" />
        </clipPath>
      </defs>
      <path 
        d="M6 2H8V1H14V2H16V3H17V4H18V5H19V7H20V14H19V16H18V20H17V21H5V20H4V16H3V14H2V8H3V5H4V4H5V3H6V2M15 5V4H13V3H9V4H7V5H6V6H5V9H4V13H5V15H6V19H8V17H10V19H12V17H14V19H16V15H17V13H18V8H17V6H16V5H15M7 8H10V11H7V8M12 11V8H15V11H12M10 13H12V15H10V13Z" 
        fill="currentColor" 
      />
      <path 
        d="M6 2H8V1H14V2H16V3H17V4H18V5H19V7H20V14H19V16H18V20H17V21H5V20H4V16H3V14H2V8H3V5H4V4H5V3H6V2M15 5V4H13V3H9V4H7V5H6V6H5V9H4V13H5V15H6V19H8V17H10V19H12V17H14V19H16V15H17V13H18V8H17V6H16V5H15M7 8H10V11H7V8M12 11V8H15V11H12M10 13H12V15H10V13Z" 
        fill="red" 
        clip-path="url(#skull-clip-{index})" 
      />
    </svg>
  `;

  function createSkullRating(rating, containerId) {
    const ratingContainer = document.getElementById(containerId);
    ratingContainer.innerHTML = '';
    ratingContainer.className = 'skull-rating';

    for (let i = 0; i < 5; i++) {
      const skullWrapper = document.createElement('div');
      skullWrapper.className = 'skull';

      const fillPercentage = Math.min(Math.max(rating - i, 0), 1);
      const skullHtml = skullSvg
        .replace(/{index}/g, i)
        .replace(/{width}/, fillPercentage * 22);

      skullWrapper.innerHTML = skullHtml;
      ratingContainer.appendChild(skullWrapper);
    }
  }

  // Example usage
  createSkullRating(3.5, 'rating-container');
</script>