Rainbow Outline

Made together with @ThePadDev (https://twitter.com/ThePadDev).

Simple outline canvas item shader that cycles colors with a sine motion. Includes parameters to offset and speed up the cycle and to offset the colors (with suggested ranges).

Shader code
Rainbow outline by @Farfalk and @ThePadDev, July 2021

Apply to canvas items with transparent backgrounds.
Check that there is sufficient transparent background space for the outline!

CC0 License (but citation is welcome <3)

shader_type canvas_item;

uniform float line_thickness : hint_range(0, 20) = 1.0;    // thickness of the line
uniform float sin_frequency : hint_range(0.1, 2.0) = 0.5;  // frequency of the rainbow
uniform float sin_offset : hint_range(0.0, 360.0) = 0.0;   // offset of the rainbow, useful to differentiate objects using the same shader
uniform float light_offset : hint_range(0.0, 1.0) = 0.5;   // this offsets all color channels; if set to 0 only red green and blue colors will be shown.

void fragment() {
	vec2 size = TEXTURE_PIXEL_SIZE * line_thickness;
	float outline = texture(TEXTURE, UV + vec2(-size.x, 0)).a;
	outline += texture(TEXTURE, UV + vec2(0, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, 0)).a;
	outline += texture(TEXTURE, UV + vec2(0, -size.y)).a;
	outline += texture(TEXTURE, UV + vec2(-size.x, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, size.y)).a;
	outline += texture(TEXTURE, UV + vec2(-size.x, -size.y)).a;
	outline += texture(TEXTURE, UV + vec2(size.x, -size.y)).a;
	outline = min(outline, 1.0);
	vec4 animated_line_color = vec4(light_offset + sin(2.0*3.14*sin_frequency*TIME),
							   light_offset + sin(2.0*3.14*sin_frequency*TIME + radians(120.0)),
							   light_offset + sin(2.0*3.14*sin_frequency*TIME + radians(240.0)),
	vec4 color = texture(TEXTURE, UV);
	COLOR = mix(color, animated_line_color, outline - color.a);
2d, animation, canvas item, Color, outline, rainbow
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

2D Outline and Rainbow outline 2 in 1

Animated Screen Outline (flaming rainbow)

Circle Rainbow

Notify of

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

This works great! I really like the the effect. Thank you for sharing this.