Clean Font Morph

john's Avatar


11 Mar, 2019 12:35 AM

Morphing cleanly from one font to another is difficult. The morphing itself is easy. The hard part is getting the text paths (or any two complex paths) properly aligned so that corresponding lines morph to lines and curves morph to curves.

The attached demo is not, alas, a general solution. It is instead a demonstration that clean morphing of complex path is possible and shows how to go about it.

For this example I transform the word "Serif" from Times Bold to Helvetica Bold. The steps are as follows:

- Choose font sizes for tightest possible overlay. (Put one on top of the other and adjust font sizes for the best match.)
- Break letters into individual contours (requires custom node included in zip file)
- Switch contour order as needed (some fonts draw their contours in different orders)
- Break contours into individual lines and curves (requires my explode node and make_curve custom node, included)
- Display color coded numbers for all fragments in both shapes in order to perform subsequent steps (see screenshot)
- Reverse path order as needed (some fonts are clockwise, some counterclockwise, some mixed)
- Replace "straight curves" (beziers that form a straight line) with lines
- If features include a square morphing to a circle, replace lines of square with straight curves
- Convert other lines to straight curves or vice versa to achieve one to one correspondence
- Shift point order of each contour so that all contours start in the same spot
- For each case where one shape has more fragments than the other, map fragments from one to an edge or curve on the other
- You should now have a one-to-one correspondence with each line matched to a line and each curve matched to a curve
- Feed all fragments from source shape into a morph node (which simply moves each point from source to target positions over time T)

That's it!

In principal you could create a CSV file of transformations for each character in a source font (designed for a specific target font). Once that hard work was done, you could then easily morph any string from the first font to the second. Using the nodes in this demo, you could certainly achieve a clean morph for a specific word or phrase in an afternoon. It would be much better to automate the alignment process. Parts of it could be automated fairly easily, but I don't yet see how to automated the whole process.

Comments welcome!


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Already uploaded files

  • serif.gif 439 KB
  • serif_screenshot.png 768 KB
  • 13.3 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

24 Mar, 2019 08:45 PM
24 Mar, 2019 12:07 AM
23 Mar, 2019 09:00 PM
22 Mar, 2019 06:37 AM
17 Mar, 2019 10:13 PM