Skip to main content
SimilarExport ZIP
100%

Fork of Refactor of Sol LeWitt Reproduction with D3 - Different shape

✓ Published0🌍 Public
KKhanin Sisaengsuwanchai
Last edited May 16, 2023
Created on May 16, 2023

This example reproduces a Sol LeWitt-style geometric drawing with a novel shape, using overlapping horizontal and vertical bars of varying blue shades. The composition is created with D3’s `select`, `range`, and `join` operations to generate SVG `rect` elements, while two SVG masks (`mask-1` and `mask-2`) apply contrasting black and white paths derived from D3’s `symbols` and `symbol` APIs to reveal the final pattern. The color palette is produced with `scaleSequential` and `interpolateBlues`, and the rendering is pure SVG.

AI-generated description

An apporoximation of Javascript visualization using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It displays a series of 100 horizontal bars overlaid with a circular mask that reveals only the central area of the pattern. Built with the D3 `select` and `range` APIs, the code constructs SVG elements via raw `document.createElementNS` calls and applies a mask to hide bars outside the circle. The design uses black rectangles on a white background, with the circle placed at the center of the viewport.

AAdeelah Mir
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired drawing using D3 and SVG. It shows a grid of horizontal and vertical bars that are partially hidden by two circular masks, creating a pattern of lines that fade in and out of view. The code uses D3’s `select`, `append`, `range`, and `.join()` API to generate the bars and masks, with the masks defined as SVG elements containing rectangles and circles. The visualization is rendered entirely with vector graphics, using a full-window canvas and a data-driven approach to build the repeating line structure.

Eedw.ext@gmail.com
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, generating an intricate grid of overlapping horizontal and vertical bars. The visualization uses two mask layers to create alternating colored regions, with the second mask inverted to produce a dynamic contrast pattern. Rendered as SVG, the code employs D3's `scaleBand`, `range`, `symbol`, and `symbols` APIs to position and shape the elements, while `join` manages the data-driven rect and path creation. Layout adapts to the browser window size, with 120 bands across the full viewport.

Mmaximus2581
88% match
Loading thumbnail…

Refactor of Sol LeWitt Reproduction with D3 - Different shape

This visualization generates a grid of thin horizontal and vertical black lines overlaid on a canvas. The lines are selectively masked based on the position of a large circular shape, creating a pattern where the horizontal lines appear within the circle’s area and the vertical lines appear outside it. Built with D3.js, the code uses `select`, `range`, and `join` to create the line elements, while `symbols` and `symbol` define the mask’s geometric path. The SVG rendering sets the stroke color and width for the lines.

KKhanin Sisaengsuwanchai
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. The visualization displays a grid of horizontal and vertical striped bars, which are masked to create two overlapping circular windows that reveal different parts of the pattern. The code builds an SVG canvas sized to the browser window, generates 100 horizontal and vertical rectangles each, and applies two distinct SVG masks with opposing black-and-white circular cutouts to produce the final layered effect. The rendering uses D3's `select`, `range`, and fluent `.join().attr()` chain for efficient element creation.

Llennardightcore@gmail.com
88% match
Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69
87% match