Sol LeWitt with D3

100%

Sol LeWitt with D3

✓ Published0🌍 Public

Last edited Jan 12, 2023

Created on Jan 12, 2023

This example renders a generative art piece inspired by Sol LeWitt, using D3 to create a full-screen SVG composition. It builds a circular mask and overlays alternating horizontal and vertical black bars, demonstrating SVG manipulation through DOM creation methods. The code uses the `selection` import from D3 and constructs elements like `circle`, `rect`, and `mask` programmatically, with the browser’s viewport dimensions determining the canvas size. The result is a geometric pattern that explores the interplay of positive and negative space.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290

91% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201

90% match

Loading thumbnail…

Sol LeWitt with D3 episode 4

This example visualizes a generative geometric composition inspired by Sol LeWitt, using overlapping grids of horizontal and vertical rectangles that intersect within circular masks. It shows two sets of thin, evenly spaced bars—one horizontal and one vertical—drawn across the full screen, with the visible area confined to two offset circular regions defined by SVG masks. Built with D3.js’s `select`, `append`, `join`, and `range` functions, the code renders SVG `rect` elements using a React-free approach, combining black and white mask layers to reveal the intersection pattern in a minimalist, screen-filling design.

LLewis Ward

89% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com

89% match

Loading thumbnail…

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas

89% match

Loading thumbnail…

D3 Sol LeWitt

This example generates a geometric abstraction inspired by Sol LeWitt using D3.js and SVG rendering. It draws 100 horizontal and vertical lines across the full canvas, with each line masked to create circular forms. The horizontal lines use a mask that reveals a white circle, while the vertical lines use an inverted mask that hides the same circle, resulting in a composition of overlapping striped bands and a central circular void. The code uses D3's `select`, `append`, and `range` functions to construct the SVG elements.

JJMeltzer92

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 to generate intersecting horizontal and vertical SVG rectangles. A pair of SVG masks with circular cutouts reveal the lines only within two offset circles, creating an optical moiré pattern across the full viewport. The code uses `d3.select`, `d3.range`, and SVG `mask` elements, rendering 100 stripes in each direction with dimensions tied to `window.innerWidth` and `window.innerHeight`. The result is a precise, generative interpretation of LeWitt’s geometric style, driven entirely by D3’s data join and SVG primitives.

Nnpinta

89% match