Stratum Currents

100%

Stratum Currents

✓ Published0🌍 Public

Last edited Jul 19, 2026

Created on Jul 19, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Bboukhaliljoe9@gmail.com

94% match

Loading thumbnail…

Streamgraph

The streamgraph displays a time series with 20 layers generated from random bump data, using the D3 stack and area components with a wiggle offset to create a flowing, organic shape. A button triggers a transition that interpolates between two different layer layouts over 2.5 seconds, using D3's path transition tweening to smoothly morph the area boundaries. Colors are assigned randomly from the interpolateCool color scale, and the visualization renders as SVG paths, with data generated from a custom bump algorithm inspired by Byron and Wattenberg.

AAjayyy

68% match

Loading thumbnail…

Untitled

This example demonstrates a full-screen, animated visualization built with SVG, showcasing a dynamic network of connected particles. The scene uses D3.js’s `d3.forceSimulation` to compute particle positions and link forces, while SVG circle and line elements render the nodes and edges. The simulation runs continuously, with the nodes gently drifting and repelling each other against a dark background. The code relies on standard SVG attributes and D3’s selection methods, with the `overflow: hidden` CSS rule ensuring the canvas remains edge-to-edge without scrollbars.

MMelissa Prax

67% match

Loading thumbnail…

Blobbing Particles

Two layers of colored particles drift and bounce across a toroidal plane, each layer rendered as semi-transparent cells whose shapes merge and separate. The cells are computed with the `distanceLimitedVoronoi` plugin, and each cell’s fill uses a radial gradient, causing a flickering effect as the cell’s bounding box changes size. The animation runs via `d3.timer`, with particle positions updated by random acceleration and damping, and SVG paths are redrawn each frame.

KKcnarf

67% match

Loading thumbnail…

Blobbing Particles IV

Three layers of colored particles—green, blue, and red—drift smoothly across the canvas, merging into blobby clusters within each layer while remaining visually distinct across layers. Each particle is a radial-gradient circle clipped to a distance-limited Voronoi cell, so nearby particles appear to fuse together. The animation uses d3.distanceLimitedVoronoi to compute cell boundaries, SimplexNoise to drive continuous movement, and D3 transitions to update positions and opacity in real time, creating a fluid, organic swarm effect.

KKcnarf

67% match

Loading thumbnail…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Mmbostock

67% match

Loading thumbnail…

Untitled

This example visualizes a dynamic, two-dimensional particle system where thousands of glowing points drift and collide within a bounded rectangular field. It shows the emergent patterns of clustering and dispersion as forces of attraction and repulsion act on the particles over time. The code uses `d3.forceSimulation` with custom force functions to manage particle velocities and positions, rendering each frame to an HTML5 Canvas. Particle trails are created by semi-transparent redraws, and the interaction of the forces produces a fluid, organic motion across the display.

Ssnowswirlin

66% match

Loading thumbnail…

Untitled

This example shows a dynamic, particle-based network visualization that resembles a constellation or neural map. A force-directed simulation positions hundreds of small glowing nodes, which are connected by thin, semi-transparent lines that flicker and fade over time. The rendering uses a custom particle system with a fading trail effect on an HTML5 Canvas, driven by `d3.forceSimulation` for physics and `requestAnimationFrame` for continuous animation. Nodes are colored in a gradient from blue to orange, and the entire scene reacts subtly to mouse movement, altering the attraction forces. The underlying data appears procedurally generated rather than from an external dataset.

IIsigned

66% match