How to display partial of a character in html webpage(eg:half a heart/circle/...)

Question

objective

find an optimal way to display parts of an emoji such as half-circle or half-heart for visual effects.(optimally be able to be able to set dynamically thru js)

something like this:
example output

research

I done some googling and find this post from SO particularly helpful. I use this as a starting point and try to make the code work with emoji. I implemented the solution suggested by @Alp in that same post with some minor changes(listed below).

changes i made

1. First change I made is I use "x x" as a placeholder in place of the circle emoji inside the div because in the original solution overlay character were applied with different color make the halfed character affect which in this case won't work for emoji.
2. Second change I made is changing background and the font-color of the placeholder element so it could blend into the background.
3. Lastly I modified the text and put two similar emoji side by side for comparison (blue is not applied with the filter and red is applied with the filter)

my code

body {
  background: orange;
  font-size: 50px;
}

.content {
  display: inline-block;
  position: relative;
  color: orange;
}

.overlay {
  width: 50%;
  position: absolute;
  overflow: hidden;
}

<span></span>
<div class="content">
  <span class="overlay"></span> x x
</div>
<br>

output

output blue-dot next to half red-dot
output blue-dot next to half red-dot(highlighted)

problem

1. red circle is not aligned with blue circle (position a bit lower than normal)
2. extra space between blue circle and red circle
3. code is not very dynamic, what can i do so i can set number of circle to display using js.