SVGで半分だけ塗られた星を再現する

1：linearGradientを使う

<svg version="1.1" width="80" height="80" viewBox="0 0 80 80">
<defs>
  <!-- 線形グラデーション -->
  <linearGradient id="g01" gradientUnits="objectBoundingBox">
  <!-- objectBoundingBoxを指定することで、図形の大きさに合わせて指定できる -->
    <!-- グラデーションの開始位置は0～1までの間なので0.5が中間点 -->
    <stop offset="0.5" stop-color="orange"/>
    <stop offset="0.5" stop-color="#ddd"/>
  </linearGradient>
</defs>
<path fill="url(#g01)" d="M43.3,4.1l9.5,19.2c0.5,0.9,1.4,1.6,2.4,1.8l21.1,3.1c2.6,0.4,3.7,3.6,1.8,5.5L62.8,48.5c-0.8,0.7-1.1,1.8-0.9,2.8l3.6,21.1c0.5,2.6-2.3,4.6-4.7,3.4l-18.9-9.9c-0.9-0.5-2.1-0.5-3,0L20,75.8c-2.4,1.2-5.1-0.8-4.7-3.4l3.6-21.1c0.2-1-0.2-2.1-0.9-2.8L2.7,33.6c-1.9-1.9-0.9-5.1,1.8-5.5L25.6,25c1-0.2,2-0.8,2.4-1.8l9.5-19.2C38.7,1.7,42.1,1.7,43.3,4.1z"/>
</svg>

3つの中では最も実用的な方法。

元の形状にかかわらず、ちょうど中間地点で切り替えられるので利用しやすい。

2：pattern要素を使う

<svg version="1.1" width="80" height="80" viewBox="0 0 80 80">
<defs>
  <pattern id="p01" x="0" y="0" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="#ddd"/>
    <rect x="0" y="0" width="50%" height="100%" fill="orange"/>
  </pattern>
</defs>
<path fill="url(#p01)" d="M43.3,4.1l9.5,19.2c0.5,0.9,1.4,1.6,2.4,1.8l21.1,3.1c2.6,0.4,3.7,3.6,1.8,5.5L62.8,48.5c-0.8,0.7-1.1,1.8-0.9,2.8l3.6,21.1c0.5,2.6-2.3,4.6-4.7,3.4l-18.9-9.9c-0.9-0.5-2.1-0.5-3,0L20,75.8c-2.4,1.2-5.1-0.8-4.7-3.4l3.6-21.1c0.2-1-0.2-2.1-0.9-2.8L2.7,33.6c-1.9-1.9-0.9-5.1,1.8-5.5L25.6,25c1-0.2,2-0.8,2.4-1.8l9.5-19.2C38.7,1.7,42.1,1.7,43.3,4.1z"/>
</svg>

pettern要素の使い方としては目新しいところはないので補足は省略。

3：filterでfeFlood要素を使う

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
<defs>
  <filter id="f01" x="0" y="0" width="100%" height="100%">
    <!-- feFlood要素は矩形の塗り領域を指定できる -->
    <feFlood x="0" y="0" width="100%" height="100%" flood-color="#ddd" result="flood01"/>
    <feFlood x="0" y="0" width="50%" height="100%" flood-color="orange" result="flood02"/>
    <!-- 二つの塗り領域をfeMerge要素で合わせる -->
    <feMerge result="merge01" x="0" y="0" width="100%" height="100%">
      <feMergeNode in="flood01"/>
      <feMergeNode in="flood02"/>
    </feMerge>
    <!-- 元の画像（星形）と合成する -->
    <feComposite in="merge01" in2="SourceAlpha" operator="atop"/>
  </filter>
</defs>
<path filter="url(#f01)" d="M43.3,4.1l9.5,19.2c0.5,0.9,1.4,1.6,2.4,1.8l21.1,3.1c2.6,0.4,3.7,3.6,1.8,5.5L62.8,48.5c-0.8,0.7-1.1,1.8-0.9,2.8l3.6,21.1c0.5,2.6-2.3,4.6-4.7,3.4l-18.9-9.9c-0.9-0.5-2.1-0.5-3,0L20,75.8c-2.4,1.2-5.1-0.8-4.7-3.4l3.6-21.1c0.2-1-0.2-2.1-0.9-2.8L2.7,33.6c-1.9-1.9-0.9-5.1,1.8-5.5L25.6,25c1-0.2,2-0.8,2.4-1.8l9.5-19.2C38.7,1.7,42.1,1.7,43.3,4.1z"/>
</svg>

filterでパターンを作るような使い方です。

あくまでこうした利用方法もありますよ、という程度で実用性は低いですね。