boukhaliljoe9@gmail.com

@Joeboukhalil·4 public vizzes

Stratum Currents

Stratum Currents is an animated SVG visualization of 400 particle paths traced through a synthetic vector field. Overlaying the full viewport, each neon-colored, Catmull-Rom–smoothed line animates from a dash offset of full length to zero, simulating fluid flow. The underlying flow field is a mathematical combination of sine and cosine functions, rendered via D3 v7’s `line()` generator with randomized stroke attributes and a `transition()` dash animation, colored by starting x-coordinate using a sequential cool interpolator.

Jul 19, 2026

Loading thumbnail…

Stratum Currents

Stratum Currents uses an animated particle flow field to visualize a dynamic, electric stream of neon lines across the screen. The piece generates 400 particles that trace paths through a sine/cosine vector field, rendering each as a smooth Catmull-Rom curve. Built with D3 v7, the SVG paths use stroke-dasharray and stroke-dashoffset transitions to create a flowing motion effect, with colors mapped from a sequential cool interpolator. The animation runs entirely in the browser, generating abstract, generative art based on live viewport dimensions.

Jul 19, 2026

Loading thumbnail…

Rhodonea Silk Ribbon

A generative data-art piece draws layered Rhodonea rose curves as animated silk ribbons, revealing a slowly rotating, warm neon flower. Each of the 100 paths maps polar coordinates (r = sin(k·θ)) with increasing scale and rotation offsets, then fades in sequentially using D3 transitions. The SVG renderer applies `d3.line` with `curveBasisClosed` and a sequential interpolator for color, producing a shimmering, layered effect against a dark background.

Jul 19, 2026

Loading thumbnail…

Mathematical Flora

Mathematical Flora renders a layered Rhodonea rose curve as a cascading series of animated, warm-colored SVG paths. The visualization shows 100 nested stroke rings, each progressively scaled and rotated to form a silk-ribbon-like flower. Using d3.line with curveBasisClosed and a scaleSequential interpolator, the code generates polar coordinates from the equation r = sin(kθ), then animates opacity through d3 transition delays for a sequential bloom effect.

Jul 15, 2026