Skip to main content
SimilarExport ZIP
100%

Sol LeWitt with d3

✓ Published1🌍 Public
Mmax-31
Last edited Aug 25, 2022
Created on Aug 25, 2022

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
92% 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
92% match
Loading thumbnail…

Sol LeWitt-d3

This example renders a full-screen SVG composed of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart. The rectangles are masked by a circular pattern, creating an effect reminiscent of Sol LeWitt’s wall drawings. The visualization uses React and is built with d3.select, d3.range, and the data-join pattern via the .join('rect') method, while the SVG mask is defined in the marks array as 'url(#circle-mask)'. The code also demonstrates dynamic sizing based on the browser window dimensions.

Bbillzhou2005
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201
91% 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
91% match
Loading thumbnail…

Sol Lewitt vertical

This example uses D3.js to render an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It creates a grid of alternating horizontal and vertical rectangles, where each set is restricted to a circular region using SVG masks with white and black fills. The first mask reveals a circle of horizontal bars, while the second exposes vertical bars around it, producing an interlocking checkerboard-like pattern. The code leverages d3.select, d3.range, and SVG mask and rect elements to generate the pattern.

AAnshul Rawat
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Aabhineetsingh10
91% match