MOD.LAB SYSTEM v2.4.1
>
hover over an element…
mod.lab v1.0
themes
filters
tool ☺
creator ⌘
contact @
license ©
code #
export ➔
dot type
Jahn Kuotrius
MIT License
.svg .otf
img_brush
Modul Design Services
MIT License
.png .jpg
rogo
vanity_ibex
MIT License
.svg
3secgraphic
Studio Studio
GPL-3.0 license
.svg
cables
community-built
MIT License
.html .js .css .patch
A MetaFont tool
Robbe Oyen
MIT License
.svg
mosaic
Grant Custer
MIT License
.png
glyph drawing club
Heikki Lotvonen
MIT License
.png .svg
iso drawing tool
Nahuel Gerth
MIT License
.jpg
ASCII playground
Andreas Gysin
Apache-2.0 license
lsd.html
Circle Square Triangle
Nicolas Tilly
requested
.png .mp4
bitscan
tamara
AGPL-3.0 license
import
pal
Grant Custer
MIT License
.png
ditherer
community-built
MIT License
.png .jpg .webp .mp4 .webm .gif
VERT
community-built
AGPL-3.0 license
most image & video
token gesture
Modul Design Services
MIT License
.webm
kidpix
community-built
GPL-3.0 license
.png
gridder
Modul Design Services
MIT License
.svg
noodle
community-built
MIT License
.png .zoe .dsk
dither
Josh Pigford
MIT License
.png .svg
grid type tool
Katharina Nejdl
coming soon
.otf
stippler
Andreas Wolf
MIT License
.png .svg
swing
headnoise
MIT License
.png frames
broider
Max Bittker
MIT License
.css
jspaint
community-built
MIT License
.png .webp .gif .tiff .jpeg .bmp .dip
uji
Noah Doersing, Raúl J. Vila
MIT License
.png .jpg .svg .json
glitcher
Aarni Koskela
MIT License
.png .gif
imagemagick
community-built
ImageMagick License
.png .jpg .webp .gif .tiff .pdf .svg .raw
mechanical-ragger
Oak Studios
MIT License
.html .css
paper.js
Jürg Lehni, Jonathan Puckey
MIT License
.svg .png .jpg .pdf .json
textmode.js
humanbydefinition
LGPL-2.1 license
.png .jpg .webp .svg .gif .webm .txt
p5.js
community-built
LGPL-2.1 license
.png .jpg frames .gif .js .webm .mp3
hydra
Olivia Jack
AGPL-3.0 license
.mp4 .webm .png .js URL
openSfM
community-built
BSD-2-Clause license
.json .ply .pdf
sofie-dyslex
Christophe Vandepoel
static website
2D Type Animation
Kilian Hoppner
MIT License
.png .webm frames
Graphite
community-built
Apache-2.0 license
.svg .png .jpg .pdf .json
shaderbooth
Max Bittker
MIT License
URL
shadowlord
Noel Delgado
MIT License
stoer
Robin Cédric Kiesel
MIT License
3dsvg
Renato Costa
MIT License
.glb .stl
QR-Tool
Arka Studio
GPL-3.0 license
.png
APack
Bairui Su
ISC License
.png .svg
Image synths
Alice Ricci
GNU AGPL
.png .svg
glyphr studio
Matthew LaGrandeur
GPL 3.0
.svg .otf
glyphr studio
Matthew LaGrandeur
GPL 3.0
.svg .otf
gridpaint
Waqas Ishaque
MIT License
.png
softbirds
Max Bittker
Unlicense license
variable type tools
Lasse Fister, Dave Crossland
Apache-2.0 license
this could be
your tool
to submit tools
history 0
scroll to zoom — drag to navigate
draw
motion
generate
edit
convert
code
render
dot type
draw,typography,grid
img_brush
draw,glitch
rogo
draw,grid,cursed
3secgraphic
draw,typography,glitch,grid,experimental
cables
motion,code,edit,render,glitch,nerd,offline
metafont
draw,typography,grid
mosaic
draw,glitch,experimental,anti-design
glyph drawing
draw,grid,nerd,cute,experimental,anti-design
iso type tool
motion,typography,grid,3d
ascii play
motion,code,generate,typography,glitch,nerd,hardcore
circle square triangle
generate,grid,experimental,trend
bitscan
convert,edit,glitch,cute,experimental,offline
pal
edit,experimental
ditherer
edit,render,glitch,throwback,cute,experimental
vert
convert
token gesture
motion,draw,nerd,hardcore,cute,experimental,cursed
kidpix
draw,glitch,throwback,cute,experimental,cursed,anti-design
gridder
generate,grid,nerd
noodle
draw,cute,anti-design
dither
generate,cute,trend
gridtype
draw,typography,grid,cute,experimental
stippler
convert,edit,experimental,cursed
swing
motion,generate,glitch,grid,experimental
broider
generate,nerd,cute,experimental
jspaint
draw,throwback,anti-design
uji
edit,generate,experimental,cursed,3d
glitcher
edit,glitch,experimental,anti-design
imagemagick
code,convert,edit,nerd,hardcore,offline
mechanical ragger
code,edit,typography,nerd,hardcore,offline
paper.js
motion,code,edit,generate,nerd
textmode.js
motion,code,generate,nerd
p5.js
motion,code,edit,generate,cute
hydra
motion,code,edit,generate,glitch,nerd,experimental,3d
openSfM
edit,render,cute,experimental,3d
sofie dyselx
generate,experimental
2D Type
motion,typography,glitch,experimental,cursed
graphite
motion,convert,draw,edit,typography,offline
shaderbooth
code,edit,glitch,cute,experimental,cursed
shadowlord
generate
stoer
motion,edit,typography,glitch,experimental,anti-design
3dsvg
motion,draw,typography,cute,3d
QRTool
convert,edit,glitch,grid,cute,experimental
Apack
convert,typography,cute,experimental
image synths
convert,edit,glitch,cute,experimental,anti-design
glyphr
convert,editl,typography
uglyph
motion,edit,generate,typography,experimental,trend,anti-design
gridpaint
draw,trend
softbirds
draw,cute,experimental,anti-design
variable type
edit,typography,grid

ISO Type Generator

by Nahuel Gerth

How can creative coding create design? Can coded generators be at the heart of a visual language and drive a corporate design? For the visual relaunch of Future Campus Ruhr we introduced the ISO Type Generator as a tool to shape the visual language. Future Campus Ruhr is a not-for-profit cultural hub in the urban area of Essen, Germany examining the impact of technology on our human society in art projects. It acts as a conduit, enabling artists and providing them with cutting edge technology as well as fostering connections between artists and industry partners. Central to the new visual identity is a focus on strong typographic elements illustrated in orthographic perspective. The illustrations can be created with a custom-built web generator. This interactive tool empowers users to define colors, perspective, animations, and freestyle letter shapes, ensuring a diverse and visually compelling representation. The ISO Type Generator generator stands as a testament to the fusion of creativity, technology, and design, embodying the essence of this thriving cultural hub.

made with p5.js

3 Second Graphic

by Studio Studio

3 second graphic is a browser-based parametric poster tool that operates in two registers: the archival logic of Another Graphic and the site-specific demands of the roadside 3 sec Gallery (Breda, The Netherlands). Studio Studio is a Ghent, Belgium based graphic and web design practice founded in 2014. We curate Another Graphic, a community-driven digital archive focused on typography, and recently published our first research publication, New Glyphs, New Writings. The invitation to 3 sec Gallery emerged from that ongoing editorial and typographic research. For context we returned to the archive as both source and method. We carried forward parts of its visual logic: the grid and the Monotesk typeface (developed for Another Graphic). The parking-site setting of the 3 sec Gallery defined the brief: two viewing speeds and two distances. Drivers read in a glance; pedestrians linger. Because the deadline was short and we needed a complete series, we developed a graphic tool based on this framework. A parametric grid engine governs layout, scale, spacing, rhythm, and density while staying flexible. To fulfill the site-specific brief we work with antonyms, translated into macro text and micro text, integrated in the tool together with a tight set of controls: size, contrast, columns, rows. Each composition can be customized while the system remains cohesive. At speed the macro letter reads instantly; up close the microtype resolves into layered detail. On export the tool places a slim frame around the artwork that prints the parameters used to generate the composition, making every poster fully reproducible from its settings. To generate the poster series we co-wrote a sentence based on antonyms: We choose light open near paths to build and give today now. Each letter of that sentence is set in macrotype on one poster. The antonym is set in microtype within the letter, for example, the "W" of "We" is set from "They," the "C" of "Choose" from "Reject." The monochrome palette provides a visual analogue to the logic of antonyms. The final result balances speed and stillness. The logic and constraints embedded in the tool ensure cohesion, while its flexibility invites variation and experimentation. By adapting the restrictions or adding more parameters, that cohesion can be modulated to produce entirely new poster series and further iterations.

made with p5.js, opentype.js & Pickr

Stoer

by Robin Cédric Kiesel

The Stoer Editor was created as part of my final thesis "STOER - Investigations into the conscious use of disturbances in typography". The aim of the work is to illustrate what a disturbance in typography can look like, when it occurs and at what point it is merely perceived as an obstacle. It shows how a consciously applied disturbance differs from one that arises unconsciously and where the limits of the plannability of disturbances lie. To illustrate this, various series of investigations were carried out, such as the random combination of different font styles in a grid, the division of letters into their characteristic segments and the effect of shifting them, and the creation of a variable monotype pixel font that is influenced by code. This editor was created to make disturbances tangible. It provides users with a quick and easy way to create abstract variations of letters.

made with x x x

uglyph

by retry.studio

Uglyph is a vector mutation playground. Users can upload an SVG file or type in text, control the parameters real-time shape evolution and edit with a cursor. Exports as an SVG, PNG, GIF or MP4. Type a word or drop an SVG and watch it come alive. Letters are sampled into thousands of points that collide, drift, and respond to your cursor in real time.

made with p5.js, opentype.js, p5.svg.js, h264-mp4-encoder

ISO Type Generator

3secgraphic

Stoer

uglyph