Mocigraph is an advanced, web-based typography engine and font creation studio. Built with Next.js and powered by a highly optimized vector compilation core, it allows creators to draw, trace, and instantly export their artwork into fully functional .OTF, .TTF, and .WOFF font files.
Say goodbye to complex desktop typography software. With Mocigraph, you can transform pixel grids and freehand SVG strokes into professional typefaces in seconds.
- High-Fidelity Vector Tracing: Instantly parse and convert freehand SVG strokes into pristine OpenType contours using Moore Neighborhood boundary tracing.
- Pixel Art Engine: Features a zero-rasterizer mathematical expansion algorithm to generate 100% sharp pixel-perfect fonts instantly.
- Algorithmic Styling Engine: Generate multiple font variations on the fly without redrawing!
- Auto-Bold: Dynamically expands stroke thickness mathematically or via high-fidelity rasterizer.
- Auto-Italic: Standardized 12-degree rightward mathematical skew for professional typographics.
- Parallel Batch Export: Powered by
Promise.alland a heavily optimized 512px rasterizer grid, exporting a 4-weight font family (Regular, Italic, Bold, Bold Italic) takes mere seconds. - Real-time Live Preview: Test your font weights, kerning, and ligatures seamlessly before exporting.
Mocigraph is built with modern, high-performance web technologies:
- Framework: Next.js (vinext) & React 19
- Typography Engine: Opentype.js
- Styling: Tailwind CSS & Raw Vanilla CSS for performance
- Database / Schema: Drizzle ORM
You can check the deployed version at https://mocigraph.woyo.workers.dev/
To run Mocigraph locally on your machine:
-
Clone the repository:
git clone https://github.com/yourusername/mocigraph.git cd mocigraph -
Install dependencies:
npm install # or pnpm install -
Start the development server:
npm run dev # If you are on an older macOS, use: npx next dev -
Open http://localhost:3000 with your browser to launch the studio.
Mocigraph isn't just a canvas; it's a computational engine:
- Pixel Bypass Tracing: For
<rect>based pixel SVGs, the engine bypasses the anti-aliased canvas and calculates exact boundary coordinates, ensuring perfect 90-degree corners even on Bold variations. - Smart Rasterizer Pipeline: When dealing with intersecting vectors or transparent overlays, Mocigraph draws the glyph onto a 512x512 memory canvas, applies a precisely calibrated luminance threshold (
< 200), and executes an edge-tracing algorithm to unify the shape perfectly without boolean geometry bugs.
Distributed under the MIT License. See LICENSE for more information.