Stretchy font/letters - vector manipulation

We are working on a project that uses typography where specific letters can be stretched horizontally and vertically to fill out any rectangle. Like this:

Some stretched letters change their form in a way that it would be hard to just manipulate a a rendered texture so i thought vectors would be a better way to start.

My original idea was to define all letter forms in svg so that each letter exists in it’s regular form as well as horizontally and vertically stretched. With that information, i should be able to easily interpolate between the 3 states.

As a first test i loaded the svg file, extracted the shape2d from each letter, interpolated all points and tadaaaa, great, i get my new letter shape.

The problem i’m running into now is that i can’t find a way to render the shape2d in the same way that it looks like coming straight out of the svg file. So i thought, the easiest would be to manipulate svg data directly but it doesn’t look like there’s a lot of functionality build into cinder to do that. (Or am i missing something?)

So i think i have 3 options:

  • Keep trying to find a way to render the shape2d so it looks like the svg file (seems like a lot of work, unless i’m missing something)
  • Feeding the manipulated data into an svg node or manipulating the data directly in svg. (any suggestion for another svg lib?)
  • Try a completely different approach. E.g. glyph manipulation… or just go straight into html+svg+js.

Any thoughts or ideas?
It’s an interesting problem, wondering how you’d go at it.


weird, I thought about this (stretched glyphs) yesterday on the bus. The first thing that I would try is to use a texture in combination with a “nice-slice” mesh. Note that the link mentions stretching actual SVG’s, but I would simply use a textured mesh. It will allow you to define exactly what parts should stretch and what parts should remain unstretched. If you render the glyph to a high resolution texture, you’ll be able to zoom in or stretch without too much degradation. Alternatively, you could use a signed distance field texture.



For option 1 that you mention, will Cairo help?