Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Yyoav95
Last edited Oct 7, 2023
Created on Oct 7, 2023

A circle of animated SVG nodes moves and changes radius in a generative pattern inspired by Sol LeWitt's geometric art. Each circle’s position and size shift continuously via a sine-wave function, creating a flowing, rhythmic composition. The visualization uses D3’s `select`, `range`, and data joins to update the rendered circles every frame, driven by a `setInterval` loop that recomputes the data with a time-based parameter.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3, rendering nine circles in a sine-wave pattern across an SVG canvas sized to the browser window. The visualization shows how simple geometric elements can create an organic, rhythmic composition. It uses D3's `select` API to append an SVG element to the body and `selectAll('circle').data(data).enter()` to generate the circles, with positions calculated using the `Math.sin` function for the vertical offset. All drawing is done via SVG vector graphics.

DDutch Hansen
89% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This D3.js (version 7.8.5) reproduction of a Sol LeWitt art piece generates an SVG canvas filling the browser window. It draws 100 horizontal and 100 vertical bands of alternating dimensions, each masked to create a circular intersection pattern. The code uses D3’s `select`, `append`, `range`, and `data().join()` API to generate the SVG elements. Two SVG masks (`circle-mask` and `circle-mask-2`) control visibility, with the second inverting the circular mask to create complementary transparency effects.

Bbtlhgboy@icloud.com
84% match
Loading thumbnail…

D3 Visualization

This work recreates a Sol LeWitt-inspired generative drawing as an animated SVG. It shows a shifting field of circles whose positions and radii oscillate along a sine wave, creating a flowing, rhythmic pattern across the browser window. The animation is driven by `setInterval` updating a time variable, with the D3.js library’s `select`, `range`, and `join` operations building the circles dynamically each frame. Data is synthesized in `makeData.js`, while `vizData.js` handles the visual rendering.

Sscott306lr
84% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It uses `select` to create an SVG canvas and `range` to generate data for drawing a grid: horizontal and vertical rectangles are appended with `.join('rect')`. Two SVG mask elements (`circle-mask` and `circle-mask-2`) reveal the grid through a central circular opening, with one mask inverting the other to create a contrasting effect. The visualization runs at full browser window size using D3 version 6.6.1.

JJeppeOEM
84% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, displaying a grid of overlapping horizontal and vertical stripes that form a circular pattern through SVG masks. The code uses `d3.select`, `d3.range`, and `join` operations to render 100 rect elements in each direction, with the stripes visible only through two circular mask regions. The first mask reveals alternating bands inside a white circle, while the second creates an inverse effect, producing a geometric interplay of lines. The rendering approach combines D3's data-join with native SVG mask and circle elements to achieve the Op-art style composition.

CCurran Kelleher
83% match
Loading thumbnail…

Fork of D3 Selection Exploration

Animated circles move in a sinusoidal wave across an SVG canvas, with their vertical position and radius oscillating over time to create a flowing, generative pattern. The visualization demonstrates D3's data join and selection mechanisms by continuously updating the `x`, `y`, and `r` attributes of circle elements at 60 frames per second. Using D3 v6's `select`, `range`, and `join` APIs, the code generates fresh data points each frame from mathematical sine functions and applies them to the existing SVG selection, showing how D3 efficiently syncs data to DOM elements.

SSam Hege
83% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This example renders a dynamic, animated reproduction of a Sol LeWitt art piece using D3.js. The visualization fills the entire browser window with a grid of thin horizontal and vertical rectangular stripes, each masked to reveal a series of large geometric symbols such as circles and stars. The piece uses D3’s `select`, `range`, `join`, and `symbol` APIs to generate the SVG shapes, while CSS keyframe animations cycle the background gradient. The masks are constructed with `symbol` paths, and the code references `window.innerWidth` and `window.innerHeight` for the canvas size.

Ssriramvsharma
83% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder
83% match