Skip to main content
SimilarExport ZIP
100%

Ep3 using d3 and Sol Lewitt diff share

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

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.

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

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`.

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

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Aabhineetsingh10
88% 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
88% 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
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201
87% match
Loading thumbnail…

Refactoring Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js and SVG rendering within a React framework. It creates a grid of 100 horizontal and 100 vertical rectangles, each with a 10-pixel thickness, that span the full width and height of the viewport. The piece applies two distinct masks, generated with the D3 `symbol` API using a circle shape, to reveal or hide portions of the grid. The code demonstrates D3’s functional chaining with `select`, `range`, and `join` to build and style elements efficiently, while the masks are configured conditionally with inverted fills.

Cclara7227
87% 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
87% match