MOD.LAB SYSTEM v2.4.1

hover over an element…

mod.lab v1.0

⠿

Manifesto mod.lab

Dear world-wide-web user,

In A Letter to Hobbyists (1976), Bill Gates wrote to "Hobbyists", who were experimenting with software on their own terms. They shared programs, changed them, and built tools in their free time. Software was copied, adjusted, and passed on. Being a hobbyist meant being curious and figuring things out yourself.

In graphic design, this introduces a different perspective on tools. Most professional design software like adobe creative cloud is proprietary. It is developed and maintained by private companies. This means, that its internal logic is not visible for users. You may wonder "well i can't understand that code anyway". Well, Updates, features, and formats are externally controlled. What can be made, and how it can be made, is shaped by these conditions.

In contrast to proprietary software, like adobe creative cloud, open source software can be studied, modified, and redistributed. This means, that a tool can be adapted to specific needs, be passed on, anything a hobbyist can do. Small tools, plug-ins, or entirely new programs can be created and shared with the open source community.

Mod.lab collects open source graphic design tools. Some were sent to mod.lab, others were found online. Many of these tools are unfinished, some might be difficult to use. Compatibility is not always guaranteed and working with them requires time and willingness to engage with unfamiliar systems. This project supports a culture of sharing and experimentation, a space where new ideas can emerge and creativity can exist side by side with transparency.

themes

filters

lightmode

dot type

Jahn Kuotrius

instagram ↗

MIT License

github ↗

.svg .otf

img_brush

Modul Design Services

website ↗

MIT License

github ↗

.png .jpg

rogo

vanity_ibex

instagram ↗

MIT License

github ↗

.svg

3secgraphic

Studio Studio

instagram ↗

GPL-3.0 license

github ↗

.svg

cables

community-built

instagram ↗

MIT License

github ↗

.html .js .css .patch

A MetaFont tool

Robbe Oyen

instagram ↗

MIT License

github ↗

.svg

mosaic

Grant Custer

website ↗

MIT License

github ↗

.png

glyph drawing club

Heikki Lotvonen

blog ↗

MIT License

github ↗

.png .svg

iso drawing tool

Nahuel Gerth

instagram , website ↗

MIT License

github ↗

.jpg

ASCII playground

Andreas Gysin

instagram ↗

Apache-2.0 license

github ↗

lsd.html

Circle Square Triangle

Nicolas Tilly

instagram , website ↗

requested

github ↗

.png .mp4

bitscan

tamara

instagram ↗

AGPL-3.0 license

github ↗

import

pal

Grant Custer

website ↗

MIT License

github ↗

.png

ditherer

community-built

–

MIT License

github ↗

.png .jpg .webp .mp4 .webm .gif

VERT

community-built

–

AGPL-3.0 license

github ↗

most image & video

token gesture

Modul Design Services

website ↗

MIT License

github ↗

.webm

kidpix

community-built

–

GPL-3.0 license

github ↗

.png

gridder

Modul Design Services

website ↗

MIT License

github ↗

.svg

noodle

community-built

–

MIT License

github ↗

.png .zoe .dsk

dither

Josh Pigford

website ↗

MIT License

github ↗

.png .svg

grid type tool

Katharina Nejdl

website ↗

coming soon

.otf

stippler

Andreas Wolf

–

MIT License

github ↗

.png .svg

swing

headnoise

–

MIT License

github ↗

.png frames

broider

Max Bittker

website ↗

MIT License

github ↗

.css

jspaint

community-built

–

MIT License

github ↗

.png .webp .gif .tiff .jpeg .bmp .dip

uji

Noah Doersing, Raúl J. Vila

–

MIT License

github ↗

.png .jpg .svg .json

glitcher

Aarni Koskela

website ↗

MIT License

github ↗

.png .gif

imagemagick

community-built

–

ImageMagick License

github ↗

.png .jpg .webp .gif .tiff .pdf .svg .raw

mechanical-ragger

Oak Studios

instagram ↗

MIT License

github ↗

.html .css

paper.js

Jürg Lehni, Jonathan Puckey

–

MIT License

github ↗

.svg .png .jpg .pdf .json

textmode.js

humanbydefinition

–

LGPL-2.1 license

github ↗

.png .jpg .webp .svg .gif .webm .txt

p5.js

community-built

instagram ↗

LGPL-2.1 license

github ↗

.png .jpg frames .gif .js .webm .mp3

hydra

Olivia Jack

fediverse ↗

AGPL-3.0 license

github ↗

.mp4 .webm .png .js URL

openSfM

community-built

–

BSD-2-Clause license

github ↗

.json .ply .pdf

sofie-dyslex

Christophe Vandepoel

–

static website

github ↗

–

2D Type Animation

Kilian Hoppner

–

MIT License

github ↗

.png .webm frames

Graphite

community-built

discord ↗

Apache-2.0 license

github ↗

.svg .png .jpg .pdf .json

shaderbooth

Max Bittker

website ↗

MIT License

github ↗

URL

shadowlord

Noel Delgado

–

MIT License

github ↗

–

stoer

Robin Cédric Kiesel

instagram ↗

MIT License

github ↗

–

3dsvg

Renato Costa

website ↗

MIT License

github ↗

.glb .stl

QR-Tool

Arka Studio

website ↗

GPL-3.0 license

github ↗

.png

APack

Bairui Su

website ↗

ISC License

github ↗

.png .svg

Image synths

Alice Ricci

website ↗

GNU AGPL

gitlab ↗

.png .svg

glyphr studio

Matthew LaGrandeur

website ↗

GPL 3.0

github ↗

.svg .otf

glyphr studio

Matthew LaGrandeur

website ↗

GPL 3.0

github ↗

.svg .otf

gridpaint

Waqas Ishaque

website ↗

MIT License

github ↗

.png

softbirds

Max Bittker

website ↗

Unlicense license

github ↗

–

variable type tools

Lasse Fister, Dave Crossland

website ↗

Apache-2.0 license

github ↗

–

this could be

your tool

contact mod.lab ↗

to submit tools

–

history 0

cluster moshpit milky way

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.

try the tool here.

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.

try the tool here.

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.

try the tool here.

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.

try the tool here.

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

ISO Type Generator

3secgraphic

Stoer

uglyph

test