Skip to main content
SimilarExport ZIP
100%

Full SoL LeWitt reproduction with D3 (from video)

✓ Published1🌍 Public
Ddan.tinoco@gmail.com
Last edited Aug 30, 2024
Created on Aug 29, 2024

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, masked to reveal geometric symbols. The visualization is rendered as an SVG via React and D3 v6, with the `d3.select`, `range`, `symbols`, and `symbol` APIs generating paths for the mask patterns. Two masks, one inverted, define which stripes appear in the final composition, creating a layered optical effect across the full viewport width. The code uses a fixed height of 200 pixels and no explicit data source beyond procedural generation.

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

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
92% 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
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…

Full Sol Lewit reproduction using D3

This example reproduces a Sol LeWitt-style geometric drawing using D3.js, combining SVG rectangles and mask elements to create layered visual patterns. It generates 100 horizontal and vertical striped rectangles, each masked by one of two masks that reveal D3’s built-in symbol shapes—including circles, crosses, diamonds, squares, stars, triangles, and wye—positioned across the canvas. The code uses `d3.range` and `d3.symbol` with `d3.symbols` to render the symbol paths, while `d3.select` handles SVG manipulation and the `mask` attribute applies the clipping patterns. The rendering is fully SVG-based within a full-viewport layout.

AAshwani Sajwan
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…

Full Sol LeWitt kind of reproduction with D3

This example uses D3 to generate a full-screen SVG reproduction of a Sol LeWitt–style geometric drawing. It renders two alternating sets of vertical and horizontal stripes, each partially masked by rows of D3’s built-in symbol shapes (including circles, crosses, and diamonds). The code leverages `d3.range`, `d3.symbol`, and SVG `<mask>` elements to create the overlapping optical effect, with the masks alternating between inverted and normal fill modes. All drawing is done in the browser using D3 v6 and SVG.

VValentine Solonechnyi
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired generative drawing using D3 v7. It displays a grid of alternating horizontal and vertical striped rectangles, with two circular mask overlays that invert the pattern in one region to create a layered visual effect. The code uses `d3.range`, `d3.select`, and `symbol` to build the SVG shapes, applying masks via `<mask>` elements. The artwork is rendered entirely with SVG attributes, using a fixed 100-step loop for each stripe direction and a dynamic viewport-sized canvas.

Wwspwll@gmail.com
90% match