Glyph Loom

Glyph Loom treats text as a seed for a small procedural script. It does not typeset a downloaded alphabet. The canvas marks are built from mathematical paths, and the ordinary text field remains your readable source.

Controls

• Your thread: enter a short text seed; initial text is SINE. The interface limits input to 12 characters.
• Phase: 0–360 degrees, in steps of 1; initial value 40. Change the relative placement of the marks’ sine components.
• Stroke: 1–8 pixels, in steps of 0.5; initial value 3. Change the weight of the drawn paths.

Use Tab to reach the text field and sliders. Type normally in the field; use the arrow keys on a focused slider. Mouse, pen and touch operate the same native controls. The canvas is display-only, not a direct-drawing input surface.

Try this

1. Enter a short repeated sequence such as AAA. Compare the marks before changing any other control.
2. Replace one character and observe the changed composition.
3. Sweep phase slowly. Notice how the relationships inside the marks shift without needing a new image.
4. Compare a fine and a heavy stroke at the same phase.

flowchart LR
  T[Typed text] --> S[Character seeds]
  S --> P[Procedural sine paths]
  H[Phase] --> P
  W[Stroke weight] --> C[Canvas marks]
  P --> C

Generated typography

A character supplies a numerical seed; sine-based curves turn that seed into geometry. Phase changes the relationship between the curves, while stroke changes how those paths are rendered. No glyph outlines are read from a font binary, icon library or image sheet.

The text is normalized to NFC and capped at 12 Unicode code points by the runtime. The native text field also has a 12-unit browser input limit, so some multi-unit characters can exhaust the field sooner. This is not a grapheme-aware writing system.

For a character code point c, the horizontal harmonic is a = 1 + c mod 3, the vertical harmonic is b = 2 + floor(c / 5) mod 4, and its seed phase is s = (c mod 97) × 2π / 97. With the Phase control converted to radians p, the principal path uses:

x(t) = 0.70 sin(a t + p) + 0.18 sin((a + 2) t + s)
y(t) = 0.69 sin(b t + s + 0.70 p) + 0.16 sin(t + p)

The renderer samples that path across one full turn, adds a sine-drawn spine and fits each mark into its cell. Equal seeds at equal settings repeat the same geometry; distinct characters are not guaranteed to produce unique signs.

The output is expressive notation rather than a promised readable replacement alphabet. Keep meaningful words in the normal interface text; do not rely on the canvas marks to communicate an instruction, name or accessible label.

The zero-asset rule does not forbid the browser’s existing system fonts for interface text. It forbids shipping a font file as a toy asset. The distinction is explained in technique.

Motion and limits

Editing the text or either slider redraws the composition. Reduced-motion mode preserves these direct changes while disabling autonomous visual animation elsewhere in the playground. Glyph Loom does not produce audio.

The short text limit keeps the composition bounded rather than acting as a full document editor. This is a drawing toy, not a font-export or text-layout application.

Continue to wave-garden to explore a simpler sine relationship, orbit-lattice for a moving field, or the playground guide for all four instruments.