Sol Lewitt reproduction itv d3 correctly

100%

Sol Lewitt reproduction itv d3 correctly

✓ Published1🌍 Public

Last edited Nov 9, 2022

Created on Nov 9, 2022

Forked from Fork of Sol Lewitt reproduction itv d3

This visualization reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin rectangles: horizontal bars masked to reveal a white circle, and vertical bars masked to form the complementary black circle. The code builds an SVG canvas using d3-selection, generating 100 rectangles per axis via d3.range and data joins. Two SVG masks define the circular regions, with one mask inverting the other to create the contrasting shapes.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol Lewitt reproduction itv d3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js selections and SVG masks. Two sets of overlapping horizontal and vertical rectangles are generated with `selectAll` and `range()`, then clipped by circular masks to create an intersecting grid pattern centered on the screen. The first SVG layer uses a white circle on a black mask, while the second inverts the mask, producing contrasting visibility between the two orientations. The visualization renders dynamically to the full window size.

Cclara7227

93% match

Loading thumbnail…

Sol Levitt's Art Reproduction

This visualization reproduces Sol LeWitt's geometric art using overlapping horizontal and vertical striped rectangles, masked to form a circular composition in the center of the viewport. The piece shows a grid-like pattern of alternating bands that intersect within a defined circular boundary against a contrasting background. The code uses D3.js selections and data joins (`selectAll`, `data`, `join`) to generate 100 horizontal and 100 vertical SVG rectangles across the full window dimensions. Two SVG masks (`circleMask`, `circleMask2`) apply inverted circle shapes to reveal or hide portions of the layered stripes, creating the characteristic LeWitt-style interplay of line and form.

Jjajinkyaa

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using SVG and D3. It displays a grid of 100 horizontal and vertical bars, each 10 pixels thick, layered over one another. A circular mask isolates a portion of the grid, creating an interplay between the two orientations. The code uses `d3.select` and `d3.range` to generate the rectangle elements, with two masks (`circle-mask` and `circle-mask-2`) defining the visible region. The rendering approach relies on SVG attributes for positioning and masks, with the canvas size set to the full window dimensions.

IIgorGorin00

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style geometric artwork using overlapping horizontal and vertical striped rectangles, with a circular mask creating a central focal point. The horizontal bands rotate continuously via a CSS keyframe animation applied to the SVG elements. Built with D3.js, the code uses `select` and `range` to generate 100 rectangles in each direction, while two SVG masks (`circle-mask` and `circle-mask-2`) alternately reveal and hide the stripes, producing an inverted circular pattern at the center.

GGayan Priyadarshana

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

Full Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt wall drawing using a grid of thin horizontal and vertical rectangles generated with d3's `range`, `select`, and `join` methods. An SVG mask with a circular `symbol` path creates a central aperture, revealing the underlying grid in contrasting hues. The code renders entirely in-browser with React, using procedural loops to construct the 100x100 element pattern.

Cclara7227

89% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This visualization reproduces a Sol Lewitt wall drawing using D3.js in a React application, rendered as SVG. It displays a grid of horizontal and vertical thin rectangles that are masked to reveal a circular window at the center, creating an overlapping pattern reminiscent of Lewitt’s geometric art. The code uses `d3.select` and `d3.range` to generate 100 rects in each direction, while SVG `mask` elements with circle shapes control visibility. The example demonstrates data-driven SVG generation and masking techniques without external data sources.

PPhan Nguyen

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered

89% match