Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
LLewis Ward
Last edited Jul 19, 2021
Created on Jul 16, 2021

This example reproduces a Sol LeWitt-style drawing by layering two sets of thin, uniformly spaced rectangles—one horizontal and one vertical—across the full browser window. The rectangles are masked by overlapping circles, creating a bold geometric interplay of lines and negative space. Built with D3 v3 and React, the code uses `d3.range` to generate 100 elements per axis, `svg.append` for the SVG structure, and custom mask definitions (`circle-mask` and `circle-mask-2`) to alternate white and black circular cutouts. The result is a clean, minimalist pattern that responds to the viewport 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…

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Wwgloss
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH
92% 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
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt drawing by layering horizontal and vertical striped rectangles across the full canvas. It applies two SVG masks—one using a large circular path generated with `d3.symbol`/`d3.symbols` and the other a plain circle—to reveal different sections of the line grid. Built with D3 v7’s `select`, `range`, and `join` methods, the code dynamically creates 100 rows and columns of thin rectangles. The static example uses no external data, relying entirely on procedural generation within an SVG rendered by React.

Nnpinta
91% 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…

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

Full So LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js. It renders a full-screen SVG with two sets of evenly spaced horizontal and vertical lines, creating a grid. Two masks are applied to the line groups, each utilizing a circle symbol generated by D3’s `symbol` API with a large radius, effectively cutting circular holes in the grid pattern. The code uses D3’s `select`, `range`, and `symbol` functions, with the second mask inverting the circle’s fill to create a complementary visual effect.

Mmax-31
91% match