Shashi Kumar

@shashilives·3 public vizzes

Fork of Sol LeWitt Reproduction with D3

This piece reproduces a Sol LeWitt wall drawing using D3.js to create a grid of horizontal and vertical lines. A circular mask reveals the intersection of the two line sets, with a white circle in the first mask and an inverted circle in the second, producing a clear central focus. The SVG rendering is generated procedurally using `d3.select`, `d3.range`, and the `join` API to append 100 rectangles in each direction, sized relative to the window dimensions. The artwork dynamically adapts to the viewport, with the mask radius fixed at 200 pixels.

Aug 20, 2023

Loading thumbnail…

Fork of Fork of Fork of Sol LeWitt Reproduction Mask Inverse

This generative art piece reproduces a Sol LeWitt-inspired composition, displaying a grid of horizontal and vertical black stripes across the full browser window. The work shows a circular region in the center where the horizontal stripes are masked out, revealing only the vertical lines, creating a distinct visual inversion. The piece uses raw SVG elements created via the Document API, employing a `mask` element with a white circle on a black rectangle to selectively hide parts of the rendered rectangles. The code iterates 100 times to generate both the horizontal and vertical stripe sets, relying on `window.innerWidth` and `window.innerHeight` to adapt the layout to the viewport size.

Aug 20, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the creation of a dynamic SVG visualization that adapts to the browser window’s dimensions. It generates 100 vertical rectangles, each 10 pixels wide, positioned incrementally along the x-axis using a JavaScript loop. The code uses the raw SVG DOM API via `document.createElementNS` to construct and style the rectangles with a skyblue fill, and it logs the computed viewport size to the console. The visualization showcases fundamental SVG shape rendering with programmable layout logic.

Aug 20, 2023