Skip to main content
SimilarExport ZIP
100%

Sol Lewitt reproduction itv d3

✓ Published1🌍 Public
Cclara7227
Last edited Nov 9, 2022
Created on Nov 9, 2022

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js selections and SVG masks. Two sets of overlapping horizontal and vertical rectangles are generated with `selectAll` and `range()`, then clipped by circular masks to create an intersecting grid pattern centered on the screen. The first SVG layer uses a white circle on a black mask, while the second inverts the mask, producing contrasting visibility between the two orientations. The visualization renders dynamically to the full window size.

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 reproduction itv d3 correctly

This visualization reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin rectangles: horizontal bars masked to reveal a white circle, and vertical bars masked to form the complementary black circle. The code builds an SVG canvas using d3-selection, generating 100 rectangles per axis via d3.range and data joins. Two SVG masks define the circular regions, with one mask inverting the other to create the contrasting shapes.

Cclara7227
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy
91% match
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
90% match
Loading thumbnail…

Sol LeWitt D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js and SVG masks. A grid of horizontal and vertical rectangles is clipped by two complementary circular masks, creating intersecting bands that reveal or hide lines in alternating regions. The visualization uses `d3.select`, `d3.range`, and `join` to generate the rectangles, with masks defined via SVG `mask` elements. The layout fills the browser window, and the code runs in a React environment with SVG rendering.

JJamie
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt drawing as a full-screen SVG composition of horizontal and vertical striped rectangles. Two circular masks reveal the overlapping line grids, creating a dynamic intersection pattern. The visualization uses D3 v6 with `select`, `range`, and data joins to generate the rect elements, while SVG `mask` elements define the circular cutouts. The rendering is built with React and SVG, adapting to the window dimensions.

MMark Christian
90% match
Loading thumbnail…

3 try of Sol Lewitt reproduction with d3

This example recreates a Sol LeWitt-inspired wall drawing using D3.js and SVG. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each strip assigned a mask that clips it into a repeating pattern of D3’s built-in symbol shapes (circles, crosses, diamonds, and triangles). Two masks are applied: one uses black symbols on white, the other inverts the fill, creating contrast between the two overlapping grids. The code builds masks programmatically via a reusable `renderMask` function and leverages D3’s `range`, `symbol`, and `symbols` APIs to generate the clipped geometry.

Cclara7227
90% 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
90% 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
90% match