Lesson4:Sol LeWitt Reproduction with D3

100%

Lesson4:Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Aug 16, 2023

Created on Aug 13, 2023

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It renders a grid of horizontal and vertical bands that are masked by circular shapes, creating a dynamic geometric pattern. The code uses D3's `select` and `append` methods to build the SVG element and its components. It leverages the `mask` attribute with defined `circle-mask` and `circle-mask-2` elements to selectively reveal or hide the lines. The visualization is generated entirely through procedural code, with no external data source, and displays its pattern across the full browser window.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of thin horizontal and vertical rectangles that overlap to form a dynamic pattern. The code generates 100 lines in each direction, with alternating mask effects—one mask inverts a central circle’s fill to create a contrasting ring, while the other keeps it solid. Using D3’s `select`, `range`, and SVG `mask` elements, the visualization fills the entire browser window, with each line’s position and size computed from the viewport dimensions. The artwork is displayed as vector graphics, leveraging D3’s declarative API for efficient DOM manipulation.

YYingkai Song

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher

88% match

Loading thumbnail…

Sol LeWitt repro with D3

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It displays a grid of horizontal and vertical lines that are selectively masked by two overlapping circular regions, creating a geometric pattern of intersecting lines with circular cutouts. The code uses raw DOM manipulation with `document.createElementNS` to construct SVG elements, defining two `mask` elements with `rect` and `circle` shapes to control which parts of the line grid are visible. The rendering is resolution-independent, adapting to the full browser window dimensions.

Ddsims2157

88% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical with D3

This example reproduces a Sol LeWitt-inspired drawing, showing a series of horizontal SVG rectangles that are masked to reveal a circle in the center of the viewport. The code builds the visualization using D3.js methods, specifically `select`, `append`, `attr`, and the `join` operation to create and style the shapes. By setting each rectangle's `mask` attribute to a predefined SVG mask, the piece demonstrates how layered vector shapes can create a generative, minimalist artwork. The rendered output uses SVG and occupies the full browser window.

WWasanta Pruttisarikorn

88% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric pattern using D3. Horizontal and vertical bands of rectangles are drawn across the entire viewport, each filtered through a mask that reveals a large circular shape in the center. The code uses `d3.select`, `d3.range`, and `d3.symbol` with `d3.symbols[1]` to generate the circular path, while `d3.join` applies rectangle data points. The SVG rendering is driven by a mask system where one mask inverts the circle to cut out the central area, creating an optical interaction of lines.

DDhruva654

88% match