How to fill a png file in function of a percentage-CodePudding

I'm currently building one of my my first projects in HTML/CSS so i'm a newbie. I want to fill a png in function of a percentage but I don't find anything talking about this. I tried using a double image but it's not clean and not working very well

It's a preview of what I did on figma

I want to make this in HTML CSS to integrate in a videogame

CodePudding user response：

I think this could be considered the quickest approach to the problem using just one img element and a css rule.

The picture is a png image I uploaded myself having a yellow background and a transparent hearth shape in the middle.

The filling is made by the background css attribute using linear-gradient to paint a given % of the picture height as blue. Since the shape inside the picture is transparent, the blue color comes out only there.

The demo includes a range slider to show how you can control that % dinamically via js.

document.addEventListener("DOMContentLoaded", ()=>{

  document.querySelector('#giveSupport').addEventListener('change', ()=>{
    sliderPercentage = window.event.target.value;
    document.querySelector('img.hearth').style.background = 
      `linear-gradient(to top, blue ${sliderPercentage}%, transparent 0)`;
  });
  
});

.hearth{
  width: 200px;
  /* here you are controlling the % */
  background: linear-gradient(to top, blue 49%, transparent 0);
}

<img
  src="https://i.ibb.co/68RY3q8/UA.png"
   />
  
<input
  type="range"
  id="giveSupport"
  style="cursor:pointer;"
  min="0"
  max="100" />

CodePudding user response：

You could also use CSS crop on some divs instead of an image, that will make your code something like this:

A container, two hearth shaped divs and a button for triggering the fill

<!-- A wrapper for the hearths -->
<div >
    <!-- A shape that serves as the placeholder -->
    <div ></div>
    <!-- The shape that is going to be filled -->
    <div ></div>
</div>
<button onclick="fillHearth()" >Fill Hearth</button>

The styles

.container {
  margin: 70px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px 120px;
  position: relative;
}
.hearth {
  position: absolute;
  width: 24px;
  height: 24px;
  clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
  transform: scale(5);
}
.base {
  background: #cecece;
}
.color {
  background: transparent;
}

The script that fills the hearth in an interval of half a second

function fillHearth(argument) {
    let current = 0;
    console.log('Filling hearth');
    const interval = setInterval(() => {
        console.log('Current: ', current);
        document.querySelector('div.color').style.background = 
              `linear-gradient(to top, #FF5252 ${current}%, transparent 0)`;
        current  = 10;
        if (current > 100) clearInterval(interval);
    }, 500);
}

The crop shape was taken from here