haithamradhi

@haithamradhi·3 public vizzes

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The visualization shows overlapping line patterns where a circular mask inverts the stripes, creating a contrasting circular region in the center of the composition. The code uses D3’s `selection` API to append SVG elements, including rectangles and masks with white and black fills, to generate the alternating bands. It uses the `d3` library version 7.8.5 and dynamically sizes the canvas to the browser window.

Jul 2, 2023

Loading thumbnail…

Sol LeWitt Reproduction

A full-window SVG reproduces a Sol LeWitt wall drawing by layering two sets of thin, evenly spaced rectangular bars that intersect at right angles. A circular mask constrains the first set of horizontal bars and a second, inverted circular mask hides the second set of vertical bars, creating a crisp circular boundary around the woven grid pattern. The rendering is generated procedurally with native DOM creation methods and SVG `mask` elements, using `document.createElementNS` to construct 100 horizontal and vertical rects without any external library.

Jul 2, 2023

Loading thumbnail…

SVG Fundamentals

This example displays a simple SVG scene with a black circle and a thick navy diagonal line on a 960 by 500 canvas. The visualization demonstrates fundamental SVG rendering through raw markup, using the `<circle>` and `<line>` elements with explicit coordinate and styling attributes. The code is embedded in a minimal HTML page, relying on the browser’s native SVG support without any JavaScript or external libraries, making it a pure static illustration of vector graphics basics.

Jun 30, 2023