Pixel Circle & Ellipse

tengkuizdihar@gmail.com

A pixelated circle, pure and simple. Great for pixel art. You can modify and use this for:

  1. Fake Shadows
  2. Base for other more complex shaders
  3. Bullets
  4. … and much more!

How to use:

  1. Drag and Drop Godot Icon into the 2D viewport (add it to the game).
  2. Apply this shader to the godot icon.
  3. Change its parameter shaders
    1. Color and alpha
    2. Elipse Factor (45 for a circle)
    3. Radius

It’s a circle, go nuts.

Inspired by https://godotshaders.com/shader/circular-life-bar/

Shader code
// Released under MIT License, Tengku Izdihar, 2025
shader_type canvas_item;

uniform float radius :hint_range(0, 1) = 0.05;
uniform vec4 circle_color : source_color = vec4(1);
uniform float elipse_factor :hint_range(0, 90) = 60;

void fragment(){
	vec2 pixelNumber = vec2(textureSize(TEXTURE, 0));
	vec2 pixelated_UV = round(UV * pixelNumber) / pixelNumber;
	vec2 uv = (pixelated_UV * 2.0 - 1.0);

	float ef = radians(elipse_factor);
	uv.x *= cos(ef);
	uv.y *= sin(ef);

	float circle = ceil(length(uv) - radius);
	circle = 1. - circle;
	circle = clamp(circle, 0, circle_color.a);

	COLOR = circle_color;
	COLOR.a = circle;
}
Live Preview
Tags
circle, Ellipse, pixel-art, simple
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

guest

2 Comments
Oldest
Newest Most Voted
Rick9000
Rick9000
8 days ago

Hi, I’m really new to shaders but I want to use this one to make a fake 2D shadow circle around my cursor (I’m making a spooky point-and-click game). I got a couple of questions:

First: how do I make those”radius”, “circle_color” and “eclipse_factor” properties shown in your preview appear in my Inspector?

Second: any idea how I can make the circle color be transparent and everything outside the circle be black?

0
Reply
Rick9000
Rick9000
5 days ago

I figured out how to reverse the color to the outside of the circle, now Im trying to understand how to move the circle to the position of my mouse cursor, since its a spooky point and click game, I want the fake light to illuminate the area around the cursor.

I think its something with:

uniform vec2 circle_pos = vec2(0.0,1.0);

but not sure how to use this. should I send the position of the center of the radius to a gdscript script with get_global_mouse_position() ?

0
Reply