Sol Levitt D3

100%

✓ Published1🌍 Public

Last edited May 13, 2024

Created on May 8, 2024

Forked from Fork of Fork of Fork of Sol Levitt Vertical

This example reproduces a Sol LeWitt-style drawing using SVG shapes. It generates a grid of horizontal and vertical striped lines across the full width and height of the browser window. Circular masks, created with `svg.append` and D3's `range`, reveal or hide portions of the lines to form two overlapping circular patterns. The visualization uses d3-selection and d3-array, with each rectangle drawn explicitly in SVG.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol Levitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical bars that are partially masked to create an interplay of solid and negative space. The visualization fills the entire browser window, with each bar’s position and thickness calculated from the window dimensions. The code employs D3’s `select`, `range`, and `symbol` APIs to generate SVG shapes and masks. Two `mask` elements, one inverted, apply a large circular path as a cutout, alternating which set of lines is visible through the circle, demonstrating core SVG masking techniques within a generative art context.

SSimon Krukowski

89% 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

89% match

Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-style drawing using d3 and SVG. It shows a grid of thin black horizontal and vertical lines, arranged in bands, with a circular mask that reveals the lines in the center while hiding them elsewhere and a second mask that creates a central black circle outline. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes. The program reads the full browser window dimensions for its canvas and draws a 100-band grid, placing the circle masks at the screen’s center.

Gg1g10

88% match

Loading thumbnail…

Sol_LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The stripes are masked by two overlapping circles, creating a circular intersection pattern that reveals and hides parts of the grid. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to define the visual effect. The artwork scales to the browser window, with masks controlling which stripes remain visible, echoing LeWitt’s geometric, systematic style.

Ffcordon@pin.upv.es

88% match

Loading thumbnail…

D3 Sol LeWitt

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It renders a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, covering the full window. Two SVG masks define a central circular aperture: the first mask reveals horizontal stripes inside the circle, while the second reveals vertical stripes outside it, creating a contrasting geometric pattern. The code uses `d3.select`, `d3.range`, and chained `.attr` calls to generate the shapes, with data bounds derived from the window dimensions.

AArturo Guevara

88% match

Loading thumbnail…

Sol Lewitt Variant with D3

This example reproduces Sol Lewitt’s geometric wall drawing as an interactive SVG visualization. It displays a grid of alternating horizontal and vertical stripes, masked into two overlapping circular windows at the center of the canvas. Using D3 selections and data joins, the code generates 100 rectangles in each direction via `range(n)`. Two SVG masks with complementary black-and-white circles control which stripes appear inside each circle, creating a layered optical effect.

Iibaird6@gatech.edu

88% match

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

PPetrescu Alexandru

88% match

Loading thumbnail…

Sol Lewitt with D3

This example recreates a Sol LeWitt-inspired drawing by layering horizontal and vertical stripes within circular masks. The stripes are generated as SVG rectangles using D3's `select` and `range` utilities, with the `join` operator binding data to the DOM. Two SVG masks create contrasting circular windows: one reveals the grid inside a circle, the other creates an inverse ring effect. The visualization adapts to the full browser window, using the viewport dimensions for the canvas size, and renders entirely through SVG elements without a separate data source.

TTirth Trivedi

88% match