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?