Ask the Path
· Part 1query() and queryAll() ask a path for things by kind — every arc, every corner, everything one circle() drew — and hand back objects that know their own geometry.
Blog
Tutorials, deep-dives, and updates about pathogen-lang — written in plain language for people who build things with code
Series · 5 parts
Drawing Without Bookkeeping
Drawing and designing in parallel: a form on one side, its schematic twin on the other, nothing copied between them. Queries, subscriptions, then a linkage, a front panel and a fretboard.
Thinking and Drawing in Parallel
· Part 2subscribe a selector to a layer and the annotations follow the drawing — the window, the ordering, the rounds, and the one closure caveat.
A Linkage That Dimensions Itself
· Part 3A four-bar linkage drawn once, and a twin that names its pivots, dimensions its links and runs the Grashof test on numbers it asked for.
The Panel Prints Its Own Drill Schedule
· Part 4A Eurorack front panel drawn in millimetres, with HP as the only parameter, that numbers its holes and prints the drill schedule the shop needs.
The Fretboard Is a Formula
· Part 5A fretboard placed from one scale length by the twelfth root of two, and a twin that numbers the frets, prints their distances, and fans at the end.
Ease Once, Apply Everywhere: Easing with Lambdas
A practical walkthrough of Pathogen's easing curves through lambdas: build an eased t once, then feed it to ranges, amplitudes, and cycles and half-cycles, ending with a finished piece.
Say It Once: switch and case Come to Pathogen
Pathogen has a switch statement. It borrows the keyword from JavaScript, the pattern matching from Swift, and the range cases from Ruby, then drops fallthrough. Values, ranges over numbers and angles, destructured Points and arrays, where guards, and an expression form that drops straight into a let or a path argument.
Series · 5 parts
Broken Lines
Five posts on stroke geometry — dash(), outline(), and startAt() — from bare mechanism to three crafts built on interrupted lines: sashiko stitching, leather stitch holes, and stencil bridges. Written as a working friction log; the closing post reports what building these taught the language.
Stroke Geometry: Dashes, Outlines, and Start Points as Real Paths
· Part 1First in Broken Lines, a five-part series on stroke geometry: dash() partitions a path into its dash and gap pieces, outline() turns a stroked line into a closed, fillable shape, and startAt() decides where a closed path begins.
Sashiko: Running Stitches from Binary Sequences
· Part 2Second in Broken Lines: a running stitch is a dash pattern, hitomezashi is one bit of dash offset per line, and a 138 × 90 mm mend-patch template falls out of a nested loop.
Leathercraft: Stitch Holes That Can't Disagree
· Part 3Third in Broken Lines: a punch hole is a near-zero dash outlined round, negative dash offsets center the run, and two mating seams derive their holes from one shared edge — so the counts match by construction.
Stencils: Bridges Are Just Gaps
· Part 4Fourth in Broken Lines: a stencil's islands fall out unless bridges hold them — and a bridge is a gap in a dashed centerline, outlined to the band width and cut with difference().
What Broken Lines Taught the Language
· Part 5Closing Broken Lines: the friction log. Building sashiko, leather, and stencil artifacts against the real language filled the log — five entries became fixes — the last one landing after publication, in the session this post promised it, and the rest are on the bench with their diagnoses attached.
Series · 4 parts
The Cutting Room
Four projects that put PathBlock.cut() and segment labels to work together — papercraft, a jigsaw, a garment pattern, and a stained-glass window. Each starts from one bare mechanism and climbs to a finished composition.
Papercraft: Cut Lines, Fold Lines, and Glue Tabs from One Plate
· Part 1First in The Cutting Room, a four-project series on cut() + segment labels: fold lines, glue tabs, named pieces, and an exploded view, all queried from the pieces themselves — not bookkept.
Jigsaw: Pieces That Know Their Own Edges
· Part 2Part 2 of The Cutting Room: the knife is a path, so jigsaw nubs are just cubics — and after the cut, labels classify the pieces, partition marks register twin seams, and rotate() scatters everything without pivot bookkeeping.
Garment Patterns: Edges with Names Sewn In
· Part 3Part 3 of The Cutting Room: draft a half-bodice with every edge named, split it at the yoke, and let the labels run the workflow — pieces identify themselves, allowances offset without losing their names, and notches land matched on both halves.
Stained Glass: Seams as Leading, Pieces as Panes
· Part 4The Cutting Room finale: a rose window where the cut is the artwork — came stroked from the seam group, panes tinted by layer routing, labels from both boolean operands coexisting, and solder dots at every joint.
Series · 5 parts
PathBlock Extensions
PathBlocks turn SVG paths into first-class values — this series builds from the basics through sampling, corner shaping, boolean operations, and cutting shapes apart.
Cutting Paths: Slicing Shapes Apart with cut()
PathBlock.cut() slices a shape along the strokes of a second PathBlock — a knife — and returns the pieces: closed shapes healed shut along the cut, open paths severed into fragments.
Series · 7 parts
Stdlib Primers
Seven short guides to the functions behind Pathogen's repeatable randomness — random-looking values that never change between runs — and the smooth curves that shape them. Each starts from a bare picture of one function and climbs to a finished composition you could ship.
hash01: A Random Number That Never Changes Its Mind
· Part 1First in a seven-part tour of Pathogen's deterministic stdlib: hash01 gives every whole-number label a random-looking value that is really a lookup — same label, same answer, on every machine, forever. Scatter, jitter, and texture you can ship.
hash11: The Same Dice, Rolled Between −1 and 1
· Part 2Part 2 of the stdlib primers: hash11 is hash01's twin for nudges — signed, deterministic jitter in [−1, 1). Baseline wobble, tilt, and the ±20% idiom that textures the blog's glow strokes.
hashRange: randomRange with a Memory
· Part 3Part 3 of the stdlib primers: hashRange(i, min, max) is the deterministic drop-in for randomRange — put an index in front and the pick keeps its word forever. Ranges become the design's tuning panel.
smoothstep: The S-Curve That Turns a Cliff into a Ramp
· Part 4Part 4 of the stdlib primers: smoothstep is a dimmer between two markers — 0 before, 1 after, a corner-free glide in between. Fades, plateaus, tapered stroke tips, and a dusk seascape with no gradients.
bump: A Hill You Can Put Anywhere
· Part 5Part 5 of the stdlib primers: bump is one smooth hill — exactly 1 at the center you pick, exactly 0 at the spread you pick, flat everywhere it matters. Hills sum into spotlights, mountains, and the width envelopes behind the blog's glow strokes.
noise: Randomness with a Smooth Ride
· Part 6Part 6 of the stdlib primers: hash01 rolls dice; noise draws the smooth curve through the rolls. Pins and a glide, one frequency knob, and randomness that neighbors agree on — texture instead of jitter.
noise2: A Weather Map of Smooth Randomness
· Part 7The stdlib primers finale: noise2 spreads smooth randomness across a surface — fog, terrain, warped grids, and the trick that makes a whole family of strokes flow as one. The series' three glows, compared.
The Reliable Line: Hash, Noise, and Envelopes Join the Stdlib
'The Shape of a Stroke' ended with a glow built on a hand-rolled hash and a hand-rolled envelope. Both are now built in — and the built-in hash is a better one: bit-identical on every JavaScript engine, not just deterministic on yours. This post rebuilds the glow on hash11() and bump(), then goes somewhere the hash can't: continuous texture with noise() and a coherent 2D field with noise2().
The Shape of a Stroke: Envelopes, Bulges, and Lambdas
Variable-width strokes get interesting when the width itself becomes a designed object — an envelope you can shape, compose, and reuse. This post builds a richer stroke step by step, shows where the abstraction outgrows named functions, and introduces Pathogen's new lambda expressions: {|a, b| ... } as a first-class closure.
Export Anything: SVG, PNG, and Print-Ready PDF from One Dialog
Pathogen Studio's Export dialog ships today: three formats, an optional legend with syntax-highlighted source, and a live preview that is exactly what you download.
Name Your Corners: Segment Labels and Corner Suffixes
Pathogen paths become collections of richly defined segments — label edges and vertices where you draw them, round corners at the point of definition, and query it all back by name.
The Swelling Line: Variable Offsets, Ribbons, and Letterforms
Two new PathBlock methods — variableOffset and compoundVariableOffset — turn any path into a rail for expressive, variable-width strokes. We build up from the rail model to curvature-continuous joins, filled ribbons with end caps, and a glyph-wrapped Pathogen wordmark.
The Full Filter Family: Glow, Emboss, Shadows, Pixelate
Five more custom filters that close the gaps native CSS leaves open: outer/inner glow, embossed surfaces, Material-style elevation shadows, inset shadows, and pixelation — all configured by named parameters, all composable via GroupLayer.
Custom Filters in Pathogen: First-Class Visual Effects
Pathogen's custom filters are first-class language values — defined once, reused, introspected, and composed in ways native CSS filter functions can't match. A walkthrough of the pipeline, anchored by NoiseFilter.
Strange Attractors: Clifford Attractor Art with Pathogen
Build Clifford attractor visualizations from scratch — iterative chaos math, efficient point rendering, color mapping strategies, and where the language hits its limits.
Building a VS Code Extension for the Pathogen Language
From Lezer migration to a full IDE experience — how we built a VS Code extension with live preview, intelligent completions, refactoring, and 16 language server features for the Pathogen SVG language.
Data Visualization with Pathogen: Building a Radial Bar Chart
Build a radial bar chart from scratch — annular sector geometry, data-driven loops, rotated labels, and new stdlib functions for polar data visualization.
Procedural Grids: Square, Triangle, and Hexagon Patterns in Pathogen
Three stdlib functions that generate complete grid geometries — squares, equilateral triangles, and hexagons — with four visual pattern types each.
Clean Tangent Control: heading() and turn() in Pathogen
Two stdlib functions that set and rotate the pen's direction without emitting path commands — enabling tangentLine and tangentArc immediately after M, and clean z closure in PathBlocks.
Smooth Curves Made Simple: Chained Bézier Splines in Pathogen
Three stdlib functions that turn waypoints into G1-continuous Bézier curves — cubicSpline for explicit tangent control, quadSpline for implicit angles, and clippedQuadSpline for eccentricity dampening.
From Fonts to Paths: Glyph Extraction with PathBlock.fromGlyph()
Turn font glyphs into PathBlock geometry — manual text layout, contour decomposition, per-character transforms, and boolean text cutouts.
TextBlock: Measure-First Text for SVG Diagrams
Compose, measure, and position text before drawing — collision-free label placement for parametric SVG diagrams.
Drop the Quotes: Color Literals in Pathogen
A UX bug became a language feature — bare hex codes, CSS color functions, and the percent suffix are now first-class expressions in Pathogen.
Building the Gradient Pipeline: From Compiler to Blog
How Pathogen's gradient system flows from .pathogen source through the compiler, GPU renderer, and blog build pipeline to produce the interactive demos in this series.
Topological Gradients: Painting with Signed Distance Fields
What if gradient color stops were not positions on a line, but closed paths? TopoGradient uses signed distance fields and Laplace solvers to create terrain-like gradients from arbitrary contour shapes.
Mesh and Freeform: Gradients That SVG Forgot
SVG2 proposed mesh gradients, then abandoned them. Pathogen implements both grid-based mesh gradients and scatter-based freeform gradients with GPU-accelerated rendering.
Beyond CSS: Conic Gradients with WebGPU Rendering
SVG has no conic gradient primitive. Pathogen adds one with partial sweeps, inner radius, direction control, and a WebGPU rendering pipeline that falls back gracefully to Canvas 2D.
Painting with Math: Linear and Radial Gradients in Pathogen
How Pathogen turns SVG's linearGradient and radialGradient into programmable, composable building blocks with OKLCH interpolation, spread methods, and gradient inheritance.
Reactive Color in SVG: From Static Paths to Dynamic Themes
How Pathogen's Color system turns SVG into a reactive medium — from OKLCH color manipulation to CSS-variable-driven theming that updates at runtime.
Adding SEO Pages to a CloudFlare Pages SPA: The Routing Sequel
After solving SPA routing on CloudFlare Pages, we needed to add server-rendered and static pages alongside the SPA. New platform, new surprises — 308 redirects, stale workers, build pipeline ordering, and the art of making static and dynamic content coexist.
The SVG Serialization Trap: Why createElementNS Broke Our Thumbnail Pipeline
How programmatically created SVG elements silently produce broken output when serialized with XMLSerializer and loaded as images — and the surprisingly simple fix.
The CloudFlare Pages SPA Routing Odyssey
A developer's journey through documentation gaps when trying to make SPA routing work on CloudFlare Pages with subdirectory deployments.