Wörter in eine Form packen — als echte Pfade für Plotter und Laser.
wordfillmaker füllt eine Silhouette mit Wörtern: Du gibst einen Text, ein Icon oder ein Bild als Umriss vor und eine Liste von Wörtern mit Gewichtung und Farbe. Die App packt die Wörter dicht in die Form, größere zuerst, bis sie gefüllt ist. Für den Export werden die Wörter mit einer echten Schriftart in Vektorpfade umgewandelt — kein Text, der beim Öffnen woanders anders aussieht, sondern saubere Kurven für Plotter oder Laser.
Die App läuft komplett im Browser. Kein Konto, kein Build, keine Cloud — eine HTML-Datei und ein paar lokale Assets.
Umschaltbar zwischen dunklem und hellem Theme — der Schalter oben rechts merkt sich die Wahl.
- Form aus Text, Icon oder Bild als Umriss.
- Wortliste mit Anzahl (Gewichtung), Füll- und Randfarbe je Wort.
- Dichte-Steuerung von locker bis randvoll, mit Mindest- und Maximalgröße in mm.
- Form-Kontur optional mit eigener Stärke und Farbe.
- Gruppierter Export: gleiche Wörter landen als SVG-Gruppe zusammen — praktisch für den Farbwechsel am Gerät.
- Echte Pfade: Export über eine mitgelieferte Schriftart (Roboto), eigene
.ttf/.otflassen sich laden. - Millimetergenau. Fläche in mm, das SVG trägt echte mm-Maße.
- Hell & Dunkel per Schalter, die Wahl bleibt gespeichert.
wordfillmaker ist eine statische Seite. Am einfachsten:
git clone https://github.com/malandereideen/wordfillmaker.git
cd wordfillmaker
python3 -m http.server 8000Dann http://localhost:8000 öffnen. (Direkt per Doppelklick
auf index.html geht auch — der lokale Server vermeidet nur eventuelle
Browser-Warnungen beim Laden der Schriftarten.)
Die Icon-Suche im Reiter Icon nutzt eine Online-API und braucht dafür Internet. Alles andere — inklusive Vektor-Export — läuft offline.
- Fläche & Form. Breite/Höhe in mm setzen, im Reiter Text/Icon/Upload die Silhouette wählen.
- Wörter anlegen. Text, Anzahl und Farben je Wort eintragen.
- Dichte einstellen und Generieren — die Wörter füllen die Form.
- Exportieren. SVG Export (Pfade) schreibt die Datei mit echten Vektorpfaden.
HTML, CSS und JavaScript ohne Build-Schritt. Das Packing arbeitet über ein
Kollisions-Raster mit Erosion; für die Umwandlung von Text in Pfade kommt
opentype.js zum Einsatz — die Bibliothek
und die Standard-Schriftart (Roboto) liegen lokal im Ordner vendor/, die
UI-Schriften in fonts/. Damit läuft der Export vollständig offline. Die Farbgebung
ist an das makr.tools-Design-System gekoppelt, sodass sich helles und dunkles Theme
umschalten lassen.
Teil von makr.tools, einer Sammlung kleiner, self-hosted Maker-Werkzeuge.
wordfillmaker ist im Vibe Coding entstanden — komplett im Gespräch mit einer KI gebaut, ohne selbst eine Zeile zu tippen. Die Idee, der Aufbau, die Entscheidungen: alles aus meinem Kopf und aus meiner Erfahrung als NC-Programmierer und Maker. Den Code hat die KI geschrieben, Schritt für Schritt, immer sofort im Browser überprüft.
Ich zeige damit gern, wie weit man heute mit diesem Ansatz kommt — von der ersten Idee bis zum lauffähigen Werkzeug.
MIT — siehe LICENSE.
Der Icon-Satz liegt lokal in icons.js: 695 gefüllte Symbole aus
Bootstrap Icons (MIT-Lizenz), dazu deutsche
Suchbegriffe — „herz", „stern", „haus" finden das Passende, ohne dass man den
englischen Namen kennen muss.
Nur die gefüllten Varianten sind dabei: Eine Strichzeichnung hat keine Fläche, die sich mit Wörtern füllen ließe.
Früher fragte das Werkzeug bei jedem Tastendruck einen Icon-Dienst im Netz. Das bedeutete, dass die IP-Adresse jedes Besuchers dorthin ging — für ein Werkzeug, das sonst vollständig im Browser läuft, ein unnötiger Preis. Seit dem 2026-07-21 verlässt keine Anfrage mehr die Seite.