2

I want to take this font:

enter image description here

and make it look more like the handwritten version:

enter image description here

I don't want to make it look that handwritten, but a little rougher curves and more stroke-like tips to the curves rather than so computer-generated looking.

Assuming I have the SVG for a single glyph isolated, how can I apply some sort of effect to the SVG path that makes it look more coarse, more handmade? And then so it can be output as an SVG path as well.

Improve this question
4
  • You're wanting to do this programmatically? or manually?
    – Zach Saucier
    Nov 11, 2019 at 2:44
  • I want to run a command or do some action to do it automatically. Doesn't have to be with a programmatic script, but I don't want to manually adjust the points to achieve the effect.
    – Lance
    Nov 11, 2019 at 3:14
  • Perhaps there is some way noise plays into this.
    – Lance
    Nov 11, 2019 at 3:16
  • Filters like the article you mention could do something along these lines. You'd have to be careful how you're doing it, as the noise could produce things that are no longer connected letters. I might recommend a programmatic changing of their path to bezier curves and then a pseudo-random adjustment of the handles.
    – Zach Saucier
    Nov 11, 2019 at 15:10

2 Answers 2

Reset to default
3

Assuming you convert these glyphs to outlines, it could be done in vector image editing software such as Adobe Illustrator or Inkscape (which is free).

In Inkscape, select the outlines and do Extensions > Modify Path > Jitter Nodes. Select the option to "Shift node handles", and adjust the displacement values as required.

enter image description here

In Illustrator a similar effect is possible with Effect > Distort & Transform > Roughen. Choose the "smooth" option, and reduce the size as required.

enter image description here

Finally in Illustrator to convert the effect to paths, click Object > Expand Appearance.

Note: There's no need to do this final step with Inkscape, since the Jitter Nodes Extension modifies the paths directly.

Improve this answer
1

Handwriting-likeness cannot be made by randomly moving the nodes of the glyph paths. A little child who tries to make slowly a freehand copy of the outline of a glyph can produce something which can be simulated by randomly moving the nodes of a path and very likely by increasing the number of the nodes. Established handwriting should look consistent which makes the problem complex. I guess a handwritizing algorithm should be multilevel. It should cause variations to text blocks, text lines, glyphs and the strokes.

You can try to affect the lowest level easily. Try to trace a raster image of a piece of text. Here's one example:

enter image description here

Tracing deforms tight curves to simpler. Inkscape did this with default settings.

If you are a programmer, you can probably cause size, rotation and placement variations, even envelope distortions. I must skip these.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.