Simple_SolLettWittRecreation

100%

Simple_SolLettWittRecreation

✓ Published1🌍 Public

Last edited Jan 4, 2023

Created on Jan 4, 2023

Two nested sets of d3-selected SVG rectangles form a subtle grid of vertical and horizontal lines, which is partially occluded by a circular mask. The entire composition is filled with a white overlay that uses the same circular mask, isolating the grid intersection in the center of the viewport. The code builds the 100 vertical and horizontal bars with `d3.range`, `selection.join`, and `selection.attr`, then applies a `<mask>` element with a centered circle to clip the background and horizontal lines against the vertical bars.

AI-generated description

ISC Licensed

Similar vizzes

Loading thumbnail…

Simple_SolLettWittRecreation_no.json

This example uses D3 v7 to render a grid of 100 vertical and horizontal bar-shaped rectangles that intersect across the full viewport. A circular SVG mask, centered in the frame, reveals only the area inside its 200-pixel radius, while the surrounding bars remain hidden behind a white overlay rectangle. The code appends SVG elements via `select`, `append`, and `join`, and uses `range` to generate the data for each bar. The visualization demonstrates how SVG masks can selectively crop layered geometric compositions in real time.

Ppeter@attachmentdivision.com

89% match

Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ

84% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas

84% match

Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

83% match

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles

83% match

Loading thumbnail…

Complete Sol LeWit Fork of SVG Fundamentals - D3 (group)

This example generates a grid of thin horizontal and vertical rectangles across the full screen, with each rectangle masked by one of two overlapping masks. The first mask uses white space around a black D3 symbol, while the second inverts that relationship, creating a woven intersection of shapes across the canvas. The code constructs the SVG using D3 selections, `range`, `join`, and the `symbol` API, with each mask defined by an SVG `mask` element. A React wrapper manages the page, and the visualization draws directly into the window-sized viewport.

SSidney Oluoch

83% match

Loading thumbnail…

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com

83% match

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine

83% match