SDF curved text

It’s time for my annual self review. In last year’s review[1] I said I wanted to improve my site:

When I first wrote my hexagon guide[1] in 2013 I used d3.js[2], which has a nice animation system. I had some trouble with CSS transitions in SVG back then, so I was using Javascript transitions using SVG attributes instead of CSS. This looked something like:

I had previously posted about drawing outlines around fonts. The goal is to make labels easier to read in situations like these:

In the In the last blog postlast blog post I wrote about how I wanted to test the parameters of I wrote about how I wanted to test the parameters of msdfgenmsdfgen[1][1], which generates multi-signed distance fields for fonts and other shapes. While testing the , which generates multi-signed distance fields for fonts and other shapes. While testing the emrangeemrange parameter, I found lots of bugs in my renderer. parameter, I found lots of bugs in my renderer.I also wanted to try out msdfgen’s new I also wanted to try out msdfgen’s new asymmetricasymmetric......

In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the rendererrenderer. I’m using . I’m using msdfgen-atlasmsdfgen-atlas to generate the textures used by the renderer, and I wanted to experiment with to generate the textures used by the renderer, and I wanted to experiment with msdfgenmsdfgen’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.