Skip to main content
SimilarExport ZIP
100%

3 try of Sol Lewitt reproduction with d3

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

4 try of Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired generative drawing using D3.js version 6 and React, rendered as SVG. It creates 100 horizontal and 100 vertical rectangles across the viewport, each masked so that alternating shapes—drawn with D3’s `symbol` API for circles, triangles, and other forms—reveal or hide the grid lines. Two masks are applied via `svg.call(renderMask, ...)` with inverted fill patterns, producing a layered, geometric composition. The code relies on D3 selections, `range`, `join`, and mask definitions to achieve the visual effect.

Cclara7227
94% match
Loading thumbnail…

Sol Lewitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using the D3 library. It generates a grid of horizontal and vertical rectangles overlaid with SVG masks containing geometric symbols. The masks, populated with shapes from D3's `symbols` and `symbol` functions, create the intersecting patterns. The code uses D3's `select`, `range`, and `join` APIs to build the SVG structure and apply the masks.

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

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

PPeiyang Li
90% 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
90% 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
90% match
Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

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

Almost Original Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-style wall drawing using D3.js within a React environment, rendered as scalable vector graphics (SVG). It generates a grid of horizontal and vertical rectangles, each masked to create alternating geometric patterns. The code uses D3’s `range`, `select`, and `join` APIs to efficiently create and update the SVG elements, and employs `symbol` to draw star-like shapes within the masks. The vignette demonstrates how procedural generation and masking can recreate minimalist art with code.

Cclara7227
90% match