Changing image color partially with mask - html

Question

i have an image(marker) for map, i need to change color scheme depending on data which i get.
I try to use mask-image to cover image with patern and color it, guess i did smth wrong, is there any way to do it without downloading images with different colors.
Inner icon:
Result i need to achive:
I tried to use such masks, first two are png, and 3 one is svg:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 40 52" xmlns="http://www.w3.org/2000/svg">
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-dashoffset: 1px; stroke-width: 0px;" d="M 20.946 51.817 C 10.713 43.246 3.804 33.213 1.433 22.624 C -0.406 14.397 3.88 7.137 14.292 0.844 C 15.759 -0.043 19.7 0.385 26.24 1.298 C 28.303 1.586 31.522 3.442 33.851 5.838 C 36.849 8.917 38.738 12.772 38.548 14.094 C 38.483 14.574 39.33 19.601 38.978 22.082 C 38.086 28.373 38.008 23.023 37.518 22.77 C 35.029 21.486 28.843 10.752 29.337 13.09 C 29.337 13.09 30.241 13.646 28.478 11.864 C 28.478 11.864 27.497 10.787 26.513 10.047 C 25.267 9.114 23.458 8.631 22.85 8.367 C 20.053 7.16 16.907 8.18 13.958 10.098 C 13.958 10.098 8.152 14.306 10.169 23.533 C 11.085 27.713 17.317 30.691 19.612 30.613 C 24.104 30.461 27.391 29.864 30.116 24.2 C 30.408 23.592 31.712 21.959 31.905 20.026 C 32.213 16.94 28.503 11.89 29.092 11.812 C 30.757 11.591 40.573 21.59 38.247 23.558 C 38.482 25.947 38.561 24.793 38.316 27.736 C 37.797 33.962 29.758 44.365 20.946 51.817 Z"/>
</svg>
And results i get using this masks:
Code i use to set mask
<img class="icon-wraper" src="botAdded.png"/>
.icon-wraper{
-webkit-mask-image: url("./POIwraper.svg");
mask-image: url("./POIwraper.svg");
mask-size: cover;
}
I realy have no idea what problem with it and how to change achive that result.

Answer 1

Well because i use react-leaflet, i found such component as divIcon, this let me use html components as i want,not only default img, so here is code that describes icon right now
<Marker
position={coordinates}
icon={
divIcon({
html:`
<div class="leaflet-div-icon-wraper">
<img class="wraper_icon" src="${image}" />
<svg class="svg_filler" viewBox="0 0 40 55" xmlns="http://www.w3.org/2000/svg">
<path style="fill: ${chosenemmissionsStats?chosenemmissionsStats.color:'grey'}; stroke: rgb(0, 0, 0); paint-order: stroke;" d="M 19.742 52.481 C 19.35 52.248 18.131 52.182 16.788 50.942 C 15.401 49.661 14.267 48.988 13.077 47.734 C 11.293 45.855 10.319 44.263 9.121 42.344 C 5.898 37.183 2.623 32.147 1.758 25.723 C 1.22 21.729 0.502 17.489 1.721 13.391 C 3.248 8.256 6.509 4.389 12.588 2.157 C 13.066 1.982 14.057 1.564 14.609 1.472 C 15.143 1.383 15.752 1.299 16.256 1.151 C 21.974 -0.523 27.779 0.952 34.097 6.63 C 37.688 9.857 39.355 15 39.127 20.994 C 38.933 26.087 39.102 31.087 35.405 36.007 C 37.668 32.5 25.365 54.955 19.716 52.365 C 18.622 51.863 30.639 29.002 29.861 27.599 C 29.864 27.599 30.627 26.058 31.425 23.619 C 32.146 21.415 33.086 17.55 30.789 13.627 C 29.632 11.652 27.689 9.557 25.593 8.408 C 23.982 7.525 22.01 7.32 20.447 7.505 C 18.226 7.768 16.089 8.043 14.533 8.742 C 13.397 9.252 11.812 10.129 10.421 11.136 C 9.579 11.746 9.003 13.211 8.631 14.522 C 8.32 15.616 8.256 16.698 8.122 17.938 C 7.787 21.042 8.564 24.565 10.941 27.718 C 12.408 29.664 15.125 30.955 17.804 31.57 C 21.789 32.485 25.982 31.036 29.742 27.499 C 32.037 25.34 35.748 33.857 35.748 33.857"/>
</svg>
</div>
`,
})}>
I made svg and change its color depending from few params that i count according to some data.