About this page

Hi! I made this page as an experiment with signed distance fields in a WebGL-based course in college. It allows you to input text and line drawings (left), and output posters and graphics with different applied effects (right). The generator uses the jump-flood algorithm to quickly calculate the shortest distance of each pixel from the input graphic, and then passes that data through a shader to determine its color value.

I should also warn you that this page is pretty GPU-intensive, because I didn’t really know what I was doing when I made it and haven’t done the work to optimize it properly.

Lastly, it’s not set up to work on small screens. Sorry if you’re reading this on your phone.


press esc to end
successfully duplicated


  • 0
  • 1
  • 2
  • composite