During the summer of 2025 I got an email from a mutual friend, connecting me Seth Denizen. Seth is a teacher, researcher, designer and artist, and he was looking for help to build a website which would fulfill several purposes. One of those was a home to display his design and writing works, and embedded or adjacent to that, a way to visualize and contextualize the research that forms the foundation of those works.

Seth thinks a lot, among many other things, about soil, flora and fauna, often through the lens of design and architecture. He makes procedural drawings of soil profiles, or "aggregates", primarily drawn using Rhino. The profiles are composed of various characters — animals, micro-organisms / bacteria, metals, plant matter, detritus, etc — that he draws using software called Rhino.

The result is something of an illustration and diagram of the life of soil that sits somewhere between the analytical, metaphorical, and artful.

The line work I found to be quite compelling, particularly the attention to weights and balance between the playful and scientific.

One of the many things I learned from Seth over the course of our collaboration and many meandering conversations that would take place over the coming months, was that through a series of family matters, Seth chose his last name. Denizen, means inhabitant, or resident. I thought it a fitting name for someone who often thinks about life and their work through the perspective of the non-anthropic.

What follows is a more technical overview of the process:

Exploration and Experimentation

Seth and I spent several weeks determining whether it was possible to create and render these profiles—containing hundreds if not thousands of his characters—in real time. I chose Pixi.js for its 2D canvas rendering capabilities. Unlike DOM-based rendering, Pixi renders directly to canvas, allowing us to handle the density of characters Seth wanted to place. We could comfortably render several thousand SVGs as cached textures, with dynamic stroke width normalization for retina displays.

I experimented with three.js for zoom and pan interactions, but the rendering overhead outweighed the benefits. We switched to SVG zoom with framer-motion transitions, which provided responsive interaction without the added complexity.

We also needed to solve the positioning problem: how to place thousands of unique characters across a 2D plane, assign them colors, and maintain a deterministic, versionable layout. The asset loader reads Zotero JSON, generates category colors, maps character names to SVG files, and computes positions via a grid system. SVG textures are cached by size tier (32px to 4096px). This approach scales cleanly: new characters or references require only updating the Zotero source and regenerating the data.

Honing the Workflow

The workflow Seth and I developed integrated his existing tools and leveraged version control for continuous deployment:

1. Character creation: Seth designs soil characters in SVG using Rhino and Illustrator.
2. Research tagging: References are added to a Zotero collection (tagged "soil-of-foamdome"), including papers, books, and other sources.
3. Project creation: To add a new design or writing work, Seth writes a markdown file with frontmatter (title, year, description) and commits it to the GitHub repository.
4. Data generation: The Zotero data is pulled via API, mapped to SVG files using a category mapping, and regenerated. This process is currently manual but reproducible.
5. Deployment: The repository is connected to Netlify, which automatically builds and deploys the site on each commit. Once Seth pushes new content and Zotero data, the site regenerates without additional steps.

This setup means adding a new project requires only creating a markdown file and updating the Zotero collection—the system handles the rest. Seth's technical background meant he understood the system's constraints—consistent character naming, thoughtful category organization—as part of the design process rather than a separate technical requirement. The workflow also served a secondary purpose: the act of organizing and curating references became part of Seth's research process, not just a step in building the site.

How it Works

The site is an interactive canvas displaying Seth's soil profiles—procedural drawings with hundreds of character SVGs positioned and colored according to a layout system. A unified panel provides access to the research: a catalog view showing 150+ research categories organized by discipline, and a detailed view showing references with full citations and metadata. Clicking a character in the canvas selects its category and jumps to that section in the reference panel.

The site is fully responsive, collapsing the side panel to a bottom sheet on mobile. The bidirectional linking between visual work and research sources creates a reading interface where the drawings and their references are accessible together.