Fork of Sol Lewitt vertical 2

100%

Fork of Sol Lewitt vertical 2

✓ Published1🌍 Public

Last edited Dec 20, 2023

Created on Dec 19, 2023

This example creates an interactive SVG composition inspired by Sol LeWitt’s vertical drawings, rendered using D3 selections and data joins. It draws 100 horizontal and 100 vertical rectangles across the full window size, with each band spaced 20 pixels apart. Two circular masks—one black with a white circle, and one white with a black circle—reveal and hide portions of the grid, producing a cross-shaped overlap in the center. The code uses `d3.select`, `.append`, `.data`, and `.join` to bind `range(n)` data to SVG `rect` elements.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

90% match

Loading thumbnail…

Fork of Sol lewitt d3

This example generates an abstract grid of 100 horizontal and vertical rectangles that intersect to form a full-screen pattern. Two SVG masks with circular holes are applied to the groups of rectangles, creating the illusion of a blank circular area at the center where the two mask types overlap. The code uses d3.select, d3.range, and SVG join operations to append the rect elements, along with mask and circle SVG elements to define the clipping effect. The visualization adapts to the browser window size by setting width and height from window.innerWidth and innerHeight.

Ddwikbtn

90% match

Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005

90% match

Loading thumbnail…

Fork of Sol Lewitt reproduction itv d3 correctly

This example reproduces a Sol Lewitt-inspired geometric artwork using D3 version 6.6.1 in a React environment, rendering to SVG. It generates 100 horizontal and 100 vertical rectangles spaced 20 pixels apart, covering the full viewport. Two SVG masks create circular cutout effects: one masks the horizontal bars with a white circle on black, the other applies an inverse pattern to the vertical bars. The code uses `select`, `range`, `.join('rect')`, and `.attr('mask')` to construct the layered composition dynamically.

Cclara7227

89% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3's selection and data-join methods. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each set masked by a circular cutout at the center—one mask inverts the other, creating a striking interlocking grid pattern. The visualization uses D3 v6's `select`, `range`, and `append` APIs to construct the SVG elements and masks, with the circle radius fixed at 200 pixels. The code demonstrates how layered SVG masks can produce complex visual effects from simple rectangular primitives.

MMohammed

89% match

Loading thumbnail…

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Mmax-31

89% match

Loading thumbnail…

Fork of Sol LeWitt With D3

This example recreates a Sol LeWitt-style generative drawing using D3.js within a React framework, rendered as SVG. The code builds layered horizontal and vertical black rectangles, masking portions with white and black shapes to create intersecting bands, plus a set of concentric elliptical paths that peek through a central circular opening. It uses D3’s `select` and `range` functions to generate data and chain SVG element creation, with `mask` elements controlling visibility. The composition fills the browser window, producing a geometric, abstract pattern.

Ccraig harbottle

88% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using overlaid horizontal and vertical stripes, each masked by a circle at the center. The composition reveals a square grid of lines intersecting within a circular boundary against a contrasting background. The visualization uses the D3.js library (v6.6.1) through a React interface, rendering SVG elements via the `select`, `range`, and `append` APIs. It constructs masks with `attr` to define the circular cutouts, and generates the 100 stripes per direction using D3's `join` for efficient data-driven element creation.

Mmaximus2581

88% match