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.
Blog
Thoughts, tutorials, and updates about svg-path-extended
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.
Boolean Operations: Combining Shapes with Union, Difference, Intersection, and XOR
How PathBlocks support curve-preserving boolean operations — combine closed shapes using set operations without linearizing curves.
Fillets and Chamfers: Rounding and Cutting Corners
Chamfer, fillet, and elliptical fillet operations on PathBlocks — cut corners with straight lines, round them with circular arcs, or shape them with ellipses.
Parametric Sampling: Placing Elements Along Curves
How to query points, tangents, and normals along any path — and use partition() to distribute elements evenly along curves.
PathBlocks: Reusable Shape Primitives in Pathogen
How PathBlocks turn SVG path fragments into composable, reusable building blocks — define once, draw anywhere, transform freely.
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.