custom ui element using unicode characters

sometime ago cloudwolf released a tutorial on how to make custom ui element (a mana bar that's on top of the hunger bar) but it is outdated and i want to do it in latest version (1.21.4-5+) i want to do a water bar and heat bar on bottom right of the screen. how can i achieve such a thing?