Warning
Work in Progress - This is an experimental tool for generating fonts using reaction-diffusion simulations. Currently focused on implementing core functionality. UI/UX improvements will come later.
Nabla Type (named after the ∇ symbol, or "nabla", used in the reaction-diffusion equations) transforms any typeface into organic, living typography using GPU-accelerated pattern generation. Each glyph becomes a seed for beautiful, naturally-evolving patterns that can be exported as vector fonts.
Forked from: Jason Webb's Reaction-Diffusion Playground - an incredible foundation for exploring reaction-diffusion simulations.
Real-time reaction-diffusion simulation on custom typography using Courier Prime
Note
This tool was created as part of the Type Design course at the Faculty of Informatics, Masaryk University.
Why "Nabla"? The project is named after the ∇ (nabla) symbol, the del operator used in the reaction-diffusion equations. Specifically, ∇² (the Laplacian) appears in both equations and determines how the chemicals diffuse through the medium. It's the mathematical heart of the pattern formation, making it a fitting namesake for a typography tool built on these equations.
While traditional type design relies on manual bezier curve manipulation, this project investigates how algorithmic processes, specifically reaction-diffusion systems, can create organic, evolving letterforms that would be nearly impossible to design by hand.
Create an open-source tool that lets anyone generate unique fonts by seeding reaction-diffusion simulations with letterforms. The complete pipeline:
- Input: Upload TTF/OTF fonts or use system fonts
- Simulation: GPU-accelerated Gray-Scott reaction-diffusion on glyph shapes
- Export: High-quality SVG paths + complete font files (OTF/TTF)
Focus: Building the core V-R-R-V (Vector→Raster→Raster→Vector) pipeline before polishing the interface.
✅ Working:
- Custom font loading with OpenType.js
- Text seed generation with blur/grayscale/boldness controls
- Boundary conditions to constrain patterns within glyph shapes
- Real-time GPU simulation (WebGL/Three.js)
- SVG export with path simplification via Paper.js
- Descriptive export filenames with metadata
🚧 In Development:
- Glyph navigation system (A-Z, a-z, 0-9, punctuation)
- Batch processing and font generation
- Project save/load functionality
📋 Planned:
- Complete font export (OTF/TTF)
- Batch ZIP export
- Typography guidelines
- UI/UX overhaul
Different reaction-diffusion presets create dramatically different organic patterns:
 Precritical Bubbles Stable bubble formations |
 Positive Bubbles Growing bubble patterns |
 Default + Boundary Constrained to glyph shape |
The third example showcases the boundary conditions feature, which constrains pattern growth to stay within the original letterform outline.
Reaction-diffusion is a mathematical model describing how two chemicals might react to each other as they diffuse through a medium together. It was proposed by Alan Turing in 1952 as a possible explanation for how patterns like zebra stripes and leopard spots form.
Credit to Karl Sims for the equation illustration.
The key parameters we can control:
f- feed rate (how much chemical A is added)k- kill rate (how much chemical B is removed)dA- diffusion rate for chemical AdB- diffusion rate for chemical B
-
Clone and install:
git clone https://github.com/aykoooo/nabla-type.git cd nabla-type npm install -
Run the development server:
npm start
Open http://127.0.0.1:9001/ in your browser.
-
Basic workflow:
- Upload a font file (TTF/OTF) or use system fonts
- Type text to use as simulation seed
- Adjust reaction-diffusion parameters (f, k, dA, dB)
- Let the simulation evolve
- Export as SVG when satisfied
The project uses a four-stage pipeline to transform vector fonts into organic patterns:
1. Vector Input (TTF/OTF) ↓ Parse with OpenType.js
2. Raster Seeding (Canvas 2D) ↓ Render glyph paths as ImageData
3. Raster Simulation (WebGL/GPU) ↓ Apply Gray-Scott equations via GLSL shaders
4. Vector Output (SVG/Fonts) ↓ Vectorize with Potrace, clean up with Paper.js
Inherited from original: WebGL/Three.js GPU acceleration, GLSL shaders, real-time reaction-diffusion simulation
Added for font generation:
- OpenType.js: Font parsing and glyph rendering
- Potrace-wasm: Bitmap vectorization
- Paper.js: SVG path simplification and cleanup
- Boundary conditions system: Constrains patterns within letterform shapes
Note: Interface is functional but not polished. Focus is on getting the core pipeline working correctly.
- Upload custom fonts (TTF, OTF) or use system fonts
- Multi-line text support with proper centering
- Boldness control (stroke width for custom fonts, weight mapping for system fonts)
- Blur and grayscale options for seed preprocessing
- Rotation support
- Real-time parameter adjustment (f, k, dA, dB)
- Preset configurations (Worms, Spots, Maze, etc.)
- Iteration control with auto-pause
- Interactive parameter map for exploration
- Boundary constraints (exact, padded, eroded, soft, inverted)
- SVG export with path simplification
- PNG raster export
- Descriptive filenames with metadata
- Custom font names preserved in export filenames
- Style maps for spatially-varying parameters
- Bias controls for directional diffusion
- Mouse interaction for adding chemical B
- Keyboard shortcuts
Next priorities:
- Glyph Navigation - A-Z, a-z, 0-9 character switching
- Font Export - Complete OTF/TTF generation pipeline
- Batch Processing - Generate entire character sets
- UI Overhaul - Proper font creation interface
Later:
- Project save/load
- Kerning and metrics
- Variable font support
- Advanced export options
This is an experimental open-source project! While the focus is currently on core functionality rather than user experience, contributions are welcome:
- 🐛 Bug reports - Help identify issues
- 💡 Feature suggestions - Ideas for the font creation workflow
- 🔧 Pull requests - Code improvements and fixes
- 📖 Documentation - Help explain the process
Original work: Jason Webb's Reaction-Diffusion Playground - The incredible foundation this project is built upon.
Key references:
- Karl Sims - Reaction-diffusion tutorial and equation visualization
- Robert Munafo - Gray-Scott parameter space exploration
- Alan Turing - The original 1952 paper
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, matching the original project.
This means:
- ✅ Share and adapt the code freely
- ✅ Must give appropriate credit
- ✅ Must share modifications under the same license
- ❌ Cannot use for commercial purposes