Tirth Trivedi

@Tirthdt·4 public vizzes

Full Sol Lewitt with D3

This example generates two sets of alternating horizontal and vertical stripes from `d3.range` and renders them as SVG `rect` elements. Each set is clipped by a circular `mask` whose pattern is created from the `d3.symbols` and `d3.symbol` functions, producing a repeated geometric motif. The masks use contrasting fills—black for the first circle and white for the second—so the overlapping stripes appear to weave through the two shapes. The visualization runs entirely in the browser with D3 7.4.4, drawing to an SVG canvas sized by the window height.

May 18, 2022

Loading thumbnail…

Sol Lewitt with D3

This example recreates a Sol LeWitt-inspired drawing by layering horizontal and vertical stripes within circular masks. The stripes are generated as SVG rectangles using D3's `select` and `range` utilities, with the `join` operator binding data to the DOM. Two SVG masks create contrasting circular windows: one reveals the grid inside a circle, the other creates an inverse ring effect. The visualization adapts to the full browser window, using the viewport dimensions for the canvas size, and renders entirely through SVG elements without a separate data source.

May 18, 2022

Loading thumbnail…

Sol Lewitt diagram

This example recreates Sol LeWitt’s geometric wall drawing using two sets of overlapping horizontal and vertical SVG rectangles. A circular mask isolates the central intersection, while a second inverted mask reveals the surrounding grid, producing a cross-shaped composition. The code generates 100 rectangles in each direction via the SVG DOM API, setting their masked attributes to create the visual interplay. Rendered in pure JavaScript with `document.createElementNS`, the artwork adapts to the full browser window size.

May 18, 2022

Loading thumbnail…

SVG Fundamentals - TDT

This example demonstrates basic SVG shape composition by building a simple face-like figure from a rectangle, circles, and lines. A yellow rectangular head contains two eyes, each made from a black outer circle with a white inner circle, alongside a small blue rectangle and a horizontal line. The code uses core SVG elements including `rect`, `circle`, and `line` within an inline `<svg>` tag, with explicit positioning and fill properties. All rendering is done directly in the browser through raw SVG markup without any external libraries.

May 16, 2022