html - CSS stroke on half of web font

CSS stroke allows to outline a font.
I want to outline only 50% of a font.

I've seen a few workaround with JavaSCript to set css on half a letter, but i would like to this with CSS.

My goal is to able to add class to the the right star web font to look like the left full star. The image is 2 diffrent icons, I want to able to create the "half" look on the star with CSS stroke effect on the web font of the icon.

This is codepen that has a one icon without the stroke CSS effect, one with CSS stroke. How can I set in the css the so the stroke effect will create half icon "full" and other half "empty"?

.empty {

  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}