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.
Blog
Thoughts, tutorials, and updates about pathogen-lang
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.
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.