Sole le witt variant

100%

Sole le witt variant - D3

✓ Published1🌍 Public

Last edited Oct 3, 2021

Created on Oct 3, 2021

This work overlays two sets of horizontal and vertical bars, each with the same SVG mask, to create a circular window that reveals the bar pattern inside a defined radius. The code uses D3 version 6.6.1, specifically the `select`, `range`, and `join` APIs, to append SVG rectangles and define two masks with a circle. The visualization is rendered in SVG, with the bars drawn across the full width or height, and the masks configured to hide or show content within the circle.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sole le witt variant full

This example generates two sets of horizontal and vertical bars that overlap to form a grid-like pattern, with a circular mask revealing the intersection of the layers. Horizontal bars are shown only inside the circle, while vertical bars appear only outside it, creating a contrast between the two regions. The visualization is rendered in SVG using D3 v6, with `range`, `select`, and `append` to construct the bars and masks, and relies on D3’s `mask` elements to define the visible areas. No external data is used; the composition is purely procedural.

Ccaitlin-woods

92% match

Loading thumbnail…

A geometric SVG composition forms a circular pattern of intersecting horizontal and vertical bars on a black background. The visualization uses two SVG masks — one with a white circle on black and another with a black circle on white — to alternate bar visibility. Horizontal bars, each 10 pixels tall with gaps, appear inside the circle, while vertical bars, 10 pixels wide, appear outside it. The code directly manipulates the DOM via `document.createElementNS` and `setAttribute`, positioning elements based on `window.innerWidth` and `window.innerHeight`.

Ccaitlin-woods

89% match

Loading thumbnail…

Full Sol Le Witt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 and SVG masks. It displays a grid of horizontal and vertical bars, with a central circular region where the two sets of bars visually intersect and invert their colors. The code uses D3 selections with `range` and `join` to generate 100 rectangles in each orientation, and defines two SVG masks with `circle` elements to control which bars are visible. The final image resembles a minimalist bar chart filtered through a circular aperture.

AAmauri Ribeiro

83% match

Loading thumbnail…

SVG + D3

A full-screen SVG pattern of 100 horizontal and vertical bars alternates in opacity according to two circular masks, revealing a central disc and its inverse. Using D3 v7, the code appends `rect` elements via `selectAll().data().join()`, sizing them by window dimensions. The masks are defined in SVG by combining a background `rect` with a `circle`, where white reveals and black conceals.

MMarta

82% match

Loading thumbnail…

Full Sol LeWitt with D3

This example renders two interlocking sets of green bars—horizontal and vertical—on a full-window SVG canvas. The bars are masked by two overlapping circular shapes created with D3’s `symbol` API, which generates geometric star-like paths. Using D3’s `select`, `range`, and `join` methods, it draws 50 bars in each direction, with the second mask inverted so that only the region outside its circle reveals the vertical bars. The visualization demonstrates how SVG masks and D3’s declarative data joins can combine to produce layered, patterned compositions.

EEd Smale

82% match

Loading thumbnail…

SOl Le witt with D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of horizontal and vertical bars that intersect within two circular masks. The SVG rendering uses D3 selections and data joins to generate 100 horizontal rectangles and 100 vertical rectangles, each constrained by a separate mask. The first mask reveals horizontal bars through a white circle on black, while the second uses the inverse, creating a contrasting circular crosshatch pattern. The code leverages D3’s `select`, `append`, and `range` APIs to build the scene dynamically.

Ddexuzi

82% match

Loading thumbnail…

Fork of Fork of Sole le witt variant fullfullfull

A pattern of thin vertical and horizontal bars forms a grid across the full screen, with alternating rows and columns interrupted by large d3 symbol shapes. Two SVG masks, one inverted and one not, reveal different symbol sets drawn with d3.symbol and d3.range. The bars are rendered as rectangles positioned via d3 selection joins, while the masks filter which symbol patterns appear in each direction. The visualization uses d3 v6.6.1 with an SVG rendering approach, creating a layered, rhythmic composition from simple geometric elements.

Ccaitlin-woods

81% match

Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

81% match