Skip to main content
SimilarExport ZIP
100%

Loop of Sol Lewitt reproduction with d3

✓ Published6🌍 Public
Cclara7227
Last edited Nov 11, 2022
Created on Nov 11, 2022

This visualization reproduces a Sol LeWitt drawing by layering horizontal and vertical striped rectangles over a grid of 100 lines each, rendered as SVG shapes. The piece uses d3's `range`, `select`, `append`, and `join` APIs to generate the geometry, with mask elements that reveal or hide alternating shapes. Two masks, one inverted, create a loop of contrasting black-and-white symbols from d3's `symbols` array, including shapes like stars and crosses, positioned across the canvas. The code relies on d3 6.6.1 within a React-free HTML page, styling text with Archivo and IBM Plex Sans fonts.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Loop of Sol Lewitt reproduction with d3

This example reproduces Sol LeWitt’s looping wall drawing using D3 v6 and React. It renders 100 horizontal and 100 vertical SVG rectangles across the full browser window, each masked by a set of geometric symbols from the `symbols` array. The code uses D3’s `select`, `range`, and `symbol` APIs to generate the grid and apply two inverted masks, creating a layered, monochrome composition with alternating visual density.

IissaHalabi99
90% match
Loading thumbnail…

Full Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt wall drawing using a grid of thin horizontal and vertical rectangles generated with d3's `range`, `select`, and `join` methods. An SVG mask with a circular `symbol` path creates a central aperture, revealing the underlying grid in contrasting hues. The code renders entirely in-browser with React, using procedural loops to construct the 100x100 element pattern.

Cclara7227
90% 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
89% match
Loading thumbnail…

Refactoring Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js and SVG rendering within a React framework. It creates a grid of 100 horizontal and 100 vertical rectangles, each with a 10-pixel thickness, that span the full width and height of the viewport. The piece applies two distinct masks, generated with the D3 `symbol` API using a circle shape, to reveal or hide portions of the grid. The code demonstrates D3’s functional chaining with `select`, `range`, and `join` to build and style elements efficiently, while the masks are configured conditionally with inverted fills.

Cclara7227
89% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using overlaid horizontal and vertical stripes, each masked by a circle at the center. The composition reveals a square grid of lines intersecting within a circular boundary against a contrasting background. The visualization uses the D3.js library (v6.6.1) through a React interface, rendering SVG elements via the `select`, `range`, and `append` APIs. It constructs masks with `attr` to define the circular cutouts, and generates the 100 stripes per direction using D3's `join` for efficient data-driven element creation.

Mmaximus2581
88% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

PPhan Nguyen
88% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This visualization reproduces a Sol Lewitt wall drawing using D3.js in a React application, rendered as SVG. It displays a grid of horizontal and vertical thin rectangles that are masked to reveal a circular window at the center, creating an overlapping pattern reminiscent of Lewitt’s geometric art. The code uses `d3.select` and `d3.range` to generate 100 rects in each direction, while SVG `mask` elements with circle shapes control visibility. The example demonstrates data-driven SVG generation and masking techniques without external data sources.

PPhan Nguyen
88% 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
88% match