If you’re reading this, you’re currently watching thousands of mathematical points dance across your screen. That subtle, swirling pattern behind the text isn’t a video loop or a CSS animation—it’s a real-time simulation of a strange attractor, running entirely in your browser.

Chaos in the Background Link to heading

Strange attractors are mathematical objects that emerge from dynamical systems. Despite being generated by deterministic equations, they exhibit chaotic behavior—never repeating, yet forever bounded within intricate, fractal geometries. The Lorenz attractor, discovered in 1963 while modeling atmospheric convection, resembles a butterfly’s wings. Others twist into knots, spirals, or alien topologies.

I built this visualization not just to admire the mathematics, but to solve a specific design problem: how do you add motion and depth to a static Hugo site without sacrificing performance or resorting to heavy video assets?

Client-Side Chaos Link to heading

Most web visualizations of this complexity rely on server-side rendering or WebGL shaders. I wanted something lighter, more portable, and entirely self-contained. This implementation performs all calculations in vanilla JavaScript, iterating through attractor equations point-by-point and rendering directly to an HTML5 Canvas.

The architecture is deliberately modular. strange-attractor-config.js houses the differential equations and parameters—swap a few constants and the Lorenz system morphs into a Thomas or Chen attractor. color-config.js controls the rendering aesthetics, adjusting trail persistence, opacity layers, and color gradients to ensure the background remains readable behind text content. strange-attractor.js orchestrates the canvas, the point locations, and the tails fading in and out.

Running at 60fps, the simulation calculates roughly 2,000 points per frame, creating those ghostly trails that slowly fade into the darkness.

Hugo Integration Link to heading

Static site generators like Hugo excel at speed and simplicity, but embedding interactive JavaScript requires careful orchestration. Following techniques from Andreas Handel’s testing methodology and Nathan’s p5.js integration guide, I positioned the canvas as a fixed background layer with a lowered z-index, allowing content to scroll naturally above the living mathematics.

The result is volundarhus.com itself—a site where every visit generates a unique trajectory through mathematical space. No two page loads produce identical patterns, yet all remain governed by the same underlying order.

The Appeal of Deterministic Unpredictability Link to heading

There’s something meditative about watching these structures emerge. Each point follows strict mathematical rules, yet the aggregate behavior feels organic, almost alive. It’s a fitting backdrop for a portfolio: structured enough to be functional, chaotic enough to be interesting.

The code is available for adaptation into your own projects. Whether you want a subtle animated background or a full-screen mathematical exploration, the attractors are waiting to render. Checkout my repo here.

Refresh the page. Watch the spiral form. You’re witnessing chaos, tamed.