Stratum Currents

100%

Stratum Currents

✓ Published0🌍 Public

Last edited Jul 19, 2026

Created on Jul 19, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

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

69% match

Loading thumbnail…

Streamgraph

A streamgraph displays 20 layers of synthetic time-series data, each rendered as a filled area with a smooth, wiggle-based baseline. The visualization alternates between two precomputed datasets when the "Update" button is clicked, triggering a six-second animated transition. The code uses the D3 v3 stack layout with the "wiggle" offset, an area generator, and linear scales for x, y, and color. Layers are vertically offset with a translate transform for added padding.

CCurran Kelleher

68% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty layers of synthetic time-series data, using a wiggle offset to minimize visual overlap. The graphic animates between two independently generated datasets, smoothly interpolating the stacked area paths over 2.5 seconds. Built with D3 v4, the example uses `d3.stack`, `d3.area`, `d3.scaleLinear`, and `d3.interpolateCool` for color. A button triggers the transition, re-binding the data and applying a transition on the `d` attribute of SVG path elements.

Mmbostock

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

66% match

Loading thumbnail…

Streamgraph

A streamgraph displays twenty stacked layers, each with two hundred samples, generated from synthetic data using a wiggle-offset stack. The visualization animates between two different datasets, smoothly transitioning the area paths over 2.5 seconds when the Update button is clicked. Built with d3.v4, it uses d3.stack, d3.area, and d3.scaleLinear, with a custom zoom that pans horizontally and a color scale from d3.interpolateCool. The random data is created via a bump function, and the rendering is pure SVG.

GGerardoFurtado

66% match

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock

65% match

Loading thumbnail…

Fork of Svelte + D3: Random Lines

This visualization shows 100 randomly generated lines that smoothly transition to new shapes every second. Each line is a natural cubic spline through a random walk of 100 points, rendered as a stroked SVG path with semi-transparent coloring. The animation leverages the Svelte `tweened` motion primitive combined with the `d3-interpolate-path` library to morph between path states. Svelte's reactive bindings to window dimensions and D3's `scaleLinear` and `extent` functions keep the chart responsive and properly scaled as the viewport changes.

CCurran Kelleher

65% match