Building a Font Generator Using Mathematical Formulas

Introduction

Hello everyone, it's Enaduri. I'm a corporate employee who builds web services and apps in my spare time.

I genuinely cannot code. I live entirely on ideas.

My stance is simple: "I handle the concepts and decision-making; the AI handles the implementation." I keep creating things I want for myself with Claude and Gemini as my partners. (Is it okay that I say this every time? Claude-san?)

Well, what I've created this time is a web service called TypePlot, which allows you to create fonts using mathematical formulas.

https://typeplot.ena-dri.dev/

---

Why Fonts with Mathematical Formulas?

It all started with a sudden spark of inspiration.

"Mathematical functions create beautiful shapes when graphed. What would happen if I used those for characters?"

I had Gemini look into it, and it turned out to be much deeper and more interesting than I expected. Sine waves and Lissajous figures are beautiful on their own. The idea is to repurpose them into character glyphs.

I hear creating fonts with AI is a common trend these days? My approach is entirely manual, but instead of handwriting, I'm attacking it with pure numbers.

Compared to existing tools, it looks like this:

Tool	Features
Glyphs, RoboFont	For professionals. Draw with a mouse
Metaflop	Formula-based but fixed parameters; English only
TypePlot	Supports arbitrary formula input; supports Hiragana and Katakana

As far as my research goes, a service that "can even create Hiragana with arbitrary formulas" has no competitors. Including Hiragana and Katakana is a huge task, after all...

Furthermore, font generation via mathematical formulas has the strength of being deterministic. If you save the parameters, anyone can reproduce or remix the same font. This is a perfect match for a gallery feature, enabling an experience where you can see the parameters and understand exactly how a font was made.

---

Technical Interesting Points

Defining Glyphs with Parametric Equations

Font characters (glyphs) are usually defined by Bezier curves. In TypePlot, those curves are generated using mathematical formulas.

x(t), y(t) → Move t from 0 to 1 to generate point sets
→ Bezier approximation (cubic bezier sequence) via fit-curve
→ Convert to TTF binary with opentype.js and download

The font coordinate system is defined as unitsPerEm=1000, x=[0,600], and y=[0,700] (with the baseline at Y=0).

Users can determine character shapes by choosing from 21 types of presets from a list and moving sliders, or by typing formulas directly. It's designed to be accessible for beginners, yet deep for experts, allowing those who love math to input their own formulas to create the shapes they envision.

dirSine — Direction-Aware Sine Wave

This was the most interesting implementation during development.

Normal sine waves always oscillate in the X direction, so if applied to a diagonal stroke, they become horizontal waves, and the character shape falls apart.

If you want the diagonal line of an 'A' to be a sine wave, it needs to oscillate along the diagonal direction. That's why I came up with dirSine (direction-aware sine wave).

// Calculate the direction vector of the stroke
const dx = x1 - x0, dy = y1 - y0;
const len = Math.sqrt(dx*dx + dy*dy);

// Unit tangent vector
const tx = dx/len, ty = dy/len;
// Unit normal vector (rotate tangent by 90°)
const nx = -ty, ny = tx;

// Advance along the tangent, oscillate with a sine wave along the normal
x(t) = x0 + t*len*tx + A*sin(2πft+φ)*nx
y(t) = y0 + t*len*ty + A*sin(2πft+φ)*ny

With this, you can draw beautiful waves even on vertical bars in diagonal directions. When applied to all characters with a "wiggly" theme, the result looks chaotic and fun.

List of Implemented Preset Functions

I wanted this to resonate with the right people, so I gave the presets professional-sounding names.

Category	Preset
Basic	Line, Ellipse, Quadratic Bezier, Cubic Bezier
Trigonometric	Sine wave, Cosine wave, Tangent, Lissajous
Directional	dirSine (Direction-aware sine wave)
Fourier	Fourier series (3rd order synthesis)
Algebraic	Parabola, Hyperbola
Special Curves	Rose curve, Cardioid, Lemniscate
Periodic Curves	Cycloid, Astroid, Epicycloid, Hypocycloid
Spiral	Archimedean spiral, Logarithmic spiral

I think just seeing these listed in the dropdown makes people go "Oh!"

Hiragana and Katakana Support

Since there are no (as far as I could research) competitors for a Japanese font generator, I put effort into this as the core differentiator.

I defined the base using the 46 standard characters (Seion) × 2, and created helper functions to automatically generate voiced sounds (Dakuten), semi-voiced sounds (Handakuten), and small Katakana characters.

Please understand that the readability is borderline by default. I'll work on it eventually...?

// Add two dots for voiced sounds to base glyph
function dakuten(base: GlyphDef, char: string): GlyphDef

// Add a circle for semi-voiced sounds to base glyph
function handakuten(base: GlyphDef, char: string): GlyphDef

// Generate small Katakana scaled by 0.7 and centered
function smallKana(base: GlyphDef, char: string): GlyphDef

"Papipupepo" is automatically generated from the definition of "Hahifuheho" + handakuten(). This saved me from having to write individual definitions. Thanks to this, I managed to cover a total of 222 characters.

While the character shapes are still rough, they can be used as a "base for modification via mathematical formulas."

---

Development Process

Collaboration with Claude Code

I implemented this in 7 phases.

Phase	Content
1	Basic editor & TTF generation
2	Preset expansion (19 types)
3	Theme features & JSON saving
4	DrawingCanvas & dirSine
5	Hiragana/Katakana support & TTF import
6	Dakuten/Handakuten, free drawing tab, UX improvements
7	Vercel deployment & Supabase gallery

I separated the "spec window (Claude / Gemini)" from the "implementation window (Claude Code)." By not mixing the conversations for refining specs and writing code, the context remained clean.
I feel like I say this every time, Claude-san.

I recorded the state as STATE_Ph*.md at the end of each phase and had the AI read it at the beginning of the next. This was effective for managing context limits, and also useful for interactions with the spec window.

Points of Struggle and Solutions

1. TTF Y-axis is inverted → glyph.getPath() returns screen coordinates (Y downwards), so I solved it by referencing glyph.path.commands directly.
2. 6 and 9 look inverted → Mistake in the ellipse parameter tStart/tEnd. For ellipses, t=0 is the right edge and t=0.5 is the left edge.
3. Crash when selecting Hiragana → Compatibility issue with old localStorage data. Solved by merging with { ...DEFAULT_GLYPHS, ...saved.glyphs }.
4. All characters turn into horizontal lines in the "Wiggly" theme → Normal sine waves are fixed horizontally, so I implemented dirSine to solve it.

---

Demo and Usage

Basic Usage

1. Select a character in the left panel (A-Z / a-z / 0-9 / Hiragana / Katakana)
2. Choose a preset for the stroke and adjust the parameters
3. Real-time preview in the right panel
4. Finish by clicking "Download TTF"

Tips

• Use "🎨 Try Sample" to test styles only on the currently selected character.
• Create original glyphs using only formulas in the "🎨 Free" tab and include them in the TTF.
• Import existing TTF/OTF files to use as a base for formula-based modification.
• You can save/load in JSON, allowing for version control of your fonts.

Bonus: The Logo for this Service Was Also Made with TypePlot

The text "Typeplot" and "Gallery" are displayed using a font created with Typeplot itself. It's a calligraphy-style font that combines dirSine and ellipses.

Displaying my own service using a font created within that same service—this is the ultimate dogfooding.

---

Conclusion

Through this project, I was reminded once again that how you combine ideas is everything.

Mathematical functions and fonts are both existing concepts. But the combination of "creating fonts with mathematical functions" and "also supporting Hiragana" is something that, as far as I could research, no one else was doing. Sorry if I missed someone. I accept the criticism.

You don't need to think too hard; you can create your own font just by moving sliders. If you are good at math, please try typing formulas directly. I would be happy if you could post the fonts you create to the gallery.

Future Prospects:

• Automatic calculation of Fourier coefficients (conversion from handwriting to formulas)
• Expansion of the gallery
• Improvement of Hiragana character shapes

Please give it a try!

https://typeplot.ena-dri.dev/

There is a Gallery feature, so I hope you will register the fonts you create there!