GLSL shader example
Neon Glow
A glowing neon ring made by dividing a small number by the distance to a line.
Live example
Edit the code and the preview updates as you type.
How it works
abs(length(p) - 0.55) is the distance to a circle line of radius 0.55, not to a filled disc. It is 0 right on the ring and grows on both sides.
The glow comes from 0.015 / d. Dividing by the distance means pixels on the line get a huge value, pixels a little away get a medium value, and far pixels get almost nothing. That long, soft tail is what makes it look like light rather than a solid stroke. max(d, 0.001) avoids dividing by zero.
1.0 - exp(-color) is a simple tone mapping step. Without it, the bright core would clip to flat blue. With it, the core fades toward white, the way real neon looks.
Try changing it
| Change | Result |
|---|---|
0.015 to 0.05 | A much bigger, brighter halo |
vec3(0.2, 0.7, 1.0) to vec3(1.0, 0.2, 0.6) | Pink neon |
length(p) to max(abs(p.x), abs(p.y)) | A glowing square instead of a ring |
Remove the exp line | Harsh clipping in the center: compare to see what tone mapping does |