Health circle

This shader can be filled by a configurable amount, which makes it useful for representing stats such as health.

Shader code
shader_type canvas_item;

uniform float width = 0.3;
uniform float gradient_ease = 5.0;
uniform float fill_ratio = 0.8;

void fragment() {
	float fill_angle = fill_ratio * 3.141592656 * 2.0;
	vec2 uv = UV * 2.0 - 1.0;
	if (atan(uv.x, uv.y) + 3.141592656 = inner_width && d <= 1.0) {
			float w = abs((1.0 + inner_width) / 2.0 - d) / (1.0 - inner_width);
			w = 1.0 - pow(w + 0.5, gradient_ease);
			COLOR = vec4(vec3(1.0), min(1.0, w));
		} else {
			COLOR.a = 0.0;
	} else {
		COLOR.a = 0.0;
circle, health, smooth, variable
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Simple Health Bar

Circle Rainbow

Crossfade Circle Shader

Notify of

Newest Most Voted
Inline Feedbacks
View all comments
2 years ago

I get an error when trying to use this…

error(16): Expected boolean expression

2 years ago
Reply to  Demindiro

Thanks for following up! I appreciate it!

2 years ago

Man, this shader is underrated! I was just thinking about how to write a health circle in GDScript and I couldn’t think of a good way (I also suck at math…) when all of a sudden I stumbled across this. Very good stuff!

Last edited 2 years ago by romanticist_20