Skip to main content
SimilarExport ZIP
100%

Grouping Rect by <g>

✓ Published1🌍 Public
Llukasilg.sol@gmail.com
Last edited May 27, 2024
Created on May 27, 2024

A single-page web drawing reproduces a Sol LeWitt piece by layering two sets of parallel lines: horizontal stripes on even rows and vertical stripes on uneven columns. It uses D3.js functions `select`, `range`, and the `.join` method to append 100 `<rect>` elements to each of two `<g>` groups. Two SVG masks, each containing a circle with a contrasting fill, selectively reveal the stripes in a circular window at the center, while the surrounding area remains hidden. The entire canvas adapts to the browser's inner width and height.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Grouping Rect by <g>

This example reproduces a Sol LeWitt art piece, layering horizontal and vertical stripes that intersect to create a grid across the entire screen. The jagged, circular pattern emerges by using two SVG masks: one shows vertical lines through a white circle, while the other reveals horizontal lines outside a black circle, and their combined effect produces curved edges. Built with D3.js (version 6.6.1), the code uses `select`, `range`, and `.join()` to generate 100 rectangles in each direction, with masks defined via `append('mask')` and styled through fill colors. The stripes use fixed pixel offsets and dimensions, creating repeating, mathematically organized visuals.

Llukasilg.sol@gmail.com
94% match
Loading thumbnail…

Sol LeWitt Reproduction (D3 groups)

This example reproduces a Sol LeWitt art piece using D3 groups to draw two sets of overlapping stripes. One group renders 100 horizontal rectangles, and another draws 100 vertical rectangles, each set filtered through a circular mask. The code uses `select`, `append`, and `join` from D3's API, with the masks defined via `svg.append('mask')` and styled using `rect` and `circle` elements. The artwork dynamically fills the browser window, showcasing a grid-and-circle motif.

LLohitB
84% match
Loading thumbnail…

group element D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing with layered horizontal and vertical stripes overlaid on a full-window SVG canvas. The piece shows a grid of thin, alternately oriented lines that are masked to reveal a central circular cutout, with the vertical and horizontal bands intersecting to create a woven pattern. Built using D3 v7, it employs `select().append()`, `range()`, and the `join()` operator to generate 100 rects in each group, while two SVG `<mask>` elements define the circular reveal and concealment for the line sets.

Mmegan-grannan
84% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

PPetrescu Alexandru
80% match
Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge
80% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 (with SVG Groups)

This is a D3.js reproduction of a Sol LeWitt art piece, rendered in SVG. The visualization shows a grid of horizontal and vertical striped rectangles overlaid on the full viewport. Two SVG masks create a central circular cutout: one mask reveals a circle in the upper layer, while the other uses inverted colors to hide the circle in the lower layer, producing a contrasting visual effect. The code uses d3.select, d3.range, and attribute chaining to generate 100 rectangles in each direction, with dimensions tied to the window size.

Nnim@brejnholt.dk
80% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Ttriciascully
79% match
Loading thumbnail…

Sol LeWitt reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript to generate SVG elements dynamically. It displays a composition of horizontal and vertical striped rectangles that form a distinct circular pattern at the center of the viewport. The rendering uses two SVG masks, `inner-circle-mask` and `outer-circle-mask`, to control the visibility of the 100 horizontal and 100 vertical `<rect>` elements, which are sized relative to the window’s dimensions. The code relies on basic SVG APIs such as `createElementNS`, `setAttribute`, and `appendChild` to construct the artwork.

AAngela Kochoska
79% match