Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction With D3

✓ Published1🌍 Public
Wwgloss
Last edited Mar 28, 2021
Created on Mar 28, 2021

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`.

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

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

WWolfgang
94% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher
94% 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
94% 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
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 Draft

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

AAndre J Denais
93% 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
93% match