Fork of Epis 4 sol lewitt

100%

Fork of Epis 4 sol lewitt

✓ Published0🌍 Public

Last edited Sep 25, 2022

Created on Sep 25, 2022

This example generates a grid of horizontal and vertical striped rectangles overlaid with two complex masks, creating an interplay of geometric forms inspired by Sol LeWitt. The SVG is rendered using D3’s `select`, `range`, and `join` to place the stripes, while custom mask paths are built with D3’s `symbol` and `symbols` API, drawing five distinct shapes at intervals. The first mask uses an inverted fill, the second a non-inverted fill, producing contrasting cutout effects across the composition. The visualization is fully responsive, sizing to the window dimensions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

MMark Christian

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian

90% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example generates an abstract grid pattern using Sol Lewitt-inspired geometry. It draws horizontal and vertical strips of rectangles, then applies two distinct masks with D3’s `symbol` shapes (including circles, crosses, and diamonds) to selectively reveal or hide portions of the grid. The masks are created with `d3.mask`, one inverted against the other, producing a layered interplay between the symbol silhouettes and the underlying striped composition. The visualization uses D3 v7 selections, `range`, and `join` to construct the SVG elements within a full-window viewport.

Aaidarshafeev1@gmail.com

90% match

Loading thumbnail…

Fork of Fork of Fork of Sol Lewitt Reproduction Vertical 4

This example creates a generative geometric composition inspired by Sol LeWitt, displayed as horizontal and vertical stripes across the screen. Two SVG masks—one with a white circle on black, another with a black circle on white—reveal alternating sets of striped rectangles, producing a crosshatch pattern where the stripes overlap. The visualization uses vanilla JavaScript with the DOM API to construct SVG elements dynamically, setting the width and height based on the browser window. It shows how masking and nested loops can generate a structured, Op-Art-like visual effect without external libraries.

Eelgato_1994

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 Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH

89% match

Loading thumbnail…

Fork of Epis 4

This example creates a full-screen interactive grid of horizontal and vertical bars overlaid with circular masks. The visualization uses D3’s `select` and `range` to generate 100 thin rectangles along each axis, producing a crosshatch pattern. Two SVG masks hide all but a central circular area, revealing the intersecting lines within the circle against a blank background. The code relies on D3’s data join (`join('rect')`) to bind array values to SVG elements, demonstrating a declarative approach to building static geometric compositions.

SSGPPellow

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