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.