Skip to main content
SimilarExport ZIP
100%

Ep3 using d3 and Sol Lewitt

✓ Published1🌍 Public
Rrashmi.s2055@gmail.com
Last edited Feb 11, 2025
Created on Feb 11, 2025

This visualization generates a grid of horizontal and vertical bars using D3.js, which are clipped by two circular masks to create a layered geometric composition reminiscent of Sol LeWitt’s wall drawings. The front set of bars appears within a central circle, while the background bars are visible outside that circle, achieved through SVG mask elements with contrasting fill colors. The code uses D3's `select`, `range`, and data join APIs to efficiently append and style the rectangles, with the entire layout sized to the browser window via `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep3 using d3 and Sol Lewitt diff share

This example uses D3.js in a React framework to generate an abstract geometric composition inspired by Sol LeWitt. It renders 100 horizontal and vertical rectangles as SVG elements, layered with two masking shapes—a star and a plus symbol—to create intersecting patterns. The code leverages D3 selections, `range()`, and `symbol()` to generate the shapes, while SVG masks control which parts of the grid remain visible. The visualization adapts to the full browser window and demonstrates a modular approach to procedural art.

Rrashmi.s2055@gmail.com
92% match
Loading thumbnail…

Ep3 using js and Sol Lewitt

This interactive SVG composition, built with vanilla JavaScript and the DOM API, generates a grid-based abstract pattern inspired by Sol LeWitt. Vertical and horizontal translucent bars are drawn across the full viewport using `createElementNS`. SVG masks (`circle-mask` and `circle-mask-2`) are applied to these bars, revealing or concealing them within two circular regions centered on the canvas. The code defines a mask with a white circle on a black background to show the horizontal lines, while a second mask uses a black circle on a white background to show the vertical lines, creating a geometric interplay of shapes.

Rrashmi.s2055@gmail.com
90% match
Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ
87% match
Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com
87% match
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
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js within a React framework. It displays a grid of thin, evenly spaced horizontal and vertical bars rendered as SVG rectangles. Two circular masks are applied to these rectangle groups, causing the horizontal bars to fade out in the center and the vertical bars to fade out in a ring pattern, creating a subtle visual interplay. The code leverages D3's selection and range APIs to generate the marks efficiently.

EEzhil-Kalai
87% match
Loading thumbnail…

Sol LeWitt D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js and SVG masks. A grid of horizontal and vertical rectangles is clipped by two complementary circular masks, creating intersecting bands that reveal or hide lines in alternating regions. The visualization uses `d3.select`, `d3.range`, and `join` to generate the rectangles, with masks defined via SVG `mask` elements. The layout fills the browser window, and the code runs in a React environment with SVG rendering.

JJamie
87% match
Loading thumbnail…

Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal bars that form a circular cutout in the center. The visualization shows 100 thin, full-width rectangles stacked vertically across the screen, with a circular mask applied to create a negative-space circle in the middle of the canvas. The code leverages D3’s `select`, `range`, and data-join methods to generate the SVG rectangles, while an SVG `<mask>` element containing a black rectangle and white circle defines the visible region. The rendering uses the D3 v7 library and outputs vector-based SVG graphics that fill the entire browser viewport.

PPrince Kumar
86% match