Skip to main content
Log in
M

Mofizur Rahman

@moficodes·3 public vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

A full-screen SVG reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical lines, each line of constant width and separated by a fixed interval. D3’s `select`, `range`, `symbols`, and `symbol` APIs generate the line structure, while mask elements, created via the `renderMask` function, define cutout shapes—a circle and other geometric symbols—through which the lines are visible. The masks use fill colors to either hide or reveal lines, producing an inverted visual effect across the composition.

Jan 7, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric composition, showing a grid of horizontal and vertical bars that intersect within a central circular boundary. The piece uses D3 v7 APIs including `select`, `range`, and `join` to generate 100 thin rectangles in each direction, sized to the full viewport. SVG masks (`circle-mask` and `rectangle-mask`) selectively reveal the horizontal lines within a 200-pixel-radius circle, while the vertical lines are inverted so only the outer area appears. The result highlights the interplay between line density and circular cropping, rendered entirely as static SVG elements.

Jan 7, 2024
Loading thumbnail…

Sol LeWitt Reproduction with JS

This example reproduces a Sol LeWitt geometric art piece using only native browser APIs. It displays a grid of horizontal and vertical rectangles intersecting around a central circular void, created with SVG masks. The code uses `document.createElementNS` to build SVG elements and applies two masks: a white circle on black for the horizontal bars and an inverted circle for the vertical bars. The 60 rectangles in each direction are generated programmatically with fixed 20-pixel spacing.

Jan 7, 2024