Dynamically fill entity picture?

Configuration Frontend
1

This is something I have done nothing of, and need to learn.

I simply want to dynamically fill this image, with the sensor data.

lpg

I have tried to create a simple SVG overlay but it didn’t seem to work. Is the only way to do this using SVG overlays?

Thanks

type: picture-elements
image: /local/images/lpg.svg
elements:
  - type: image
    entity: sensor.weigh_test_hx711_value
    image: local/images/lpg.png
    style:
      top: 210%
      left: 50%
      width: 100%
      height: |
        [[[
          return (states['sensor.weigh_test_hx711_value'].state / 100) * 100 + '%';
        ]]]
2

Hard to tell since it is unclear which image is used as “lpg.png”.
Also, why svg is used as a background?
Anyway, templates are not supported here:

      height: |
        [[[
          return (states['sensor.weigh_test_hx711_value'].state / 100) * 100 + '%';
        ]]]

Seems that you took a code from some different card like a custom button-card.
If you need a dynamic styling - check this: google “picture elements small tutorial” → 1st post → conditional styles.
Probably you expect to have a “tank” image and a “level” image properly positioned - but you may face issues on different viewports (explained in that tutorial as well).
Also, there is a nice custom card to show liquids & gases.