Satyum Singh Pathania

@Satyum-Singh·4 public vizzes

Part(2) of Sol LeWitt Innovation

This visualization draws a grid of horizontal and vertical lines that are selectively revealed through two circular masks, creating a composition inspired by Sol LeWitt's geometric art. The horizontal lines use a mask with a white circle, while the vertical lines use an inverse mask with a black circle, producing contrasting circular cutouts. Built with raw SVG element creation via the `document.createElementNS` API and D3's `selection` import, the code generates 50 lines in each direction with fixed spacing. The masks and lines are constructed entirely through imperative SVG manipulation, demonstrating a minimalist, code-driven approach to generative drawing.

Dec 7, 2023

Loading thumbnail…

Reproduction of Sol LeWitt Innovation

This interactive reproduction of Sol LeWitt’s wall drawing uses a grid of horizontal and vertical lines clipped by circular masks to create a dynamic, overlapping pattern. Rendered as an SVG, the piece generates 50 horizontal and 50 vertical rectangles, with the horizontal lines masked by a white circle on a black background and the vertical lines by the inverse mask. Written in raw JavaScript, it programmatically builds the SVG elements without external libraries, responding to the browser window’s dimensions for its layout. The result is a geometric, generative artwork that mimics LeWitt’s conceptual, rule-based style.

Dec 7, 2023

Loading thumbnail…

Sol LeWitt Innovation

This piece renders a grid of thin horizontal and vertical lines on an SVG canvas. The horizontal lines are clipped by a circular mask, creating a visible disk at the center while the vertical lines remain unclipped across the full canvas. Built with the SVG API and JavaScript, the code creates 50 horizontal and 50 vertical rectangles, applying a `<mask>` with a circle to limit the visibility of the former. The masks and shapes are generated procedurally.

Dec 5, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational shapes of SVG graphics: a blue circle, a green rectangle with a red outline, and a navy diagonal line. The code uses raw SVG elements—`circle`, `rect`, and `line`—with explicit attributes for positioning, dimensions, and styling. It renders directly in the browser via an inline `<svg>` tag with a fixed 960 by 500 pixel viewport. The visualization serves as a static, code-level introduction to SVG drawing primitives, showing how coordinates, fill colors, and stroke properties are specified manually.

Dec 2, 2023