lennardightcore@gmail.com

@n-boudaya·4 public vizzes

Color Bands, Plate #04 by Sol LeWitt in D3

This visualization reproduces Sol LeWitt’s Color Bands, Plate #04 by rendering four concentric rainbow-colored arcs on a black square canvas. Three separate masked groups show different quarter- or half-circle segments of the rings, with colors chosen sequentially to avoid immediate repetition. The code uses D3’s `arc` generator and `mask` elements, along with utilities like `select` and `range`, to build the SVG output dynamically based on the window dimensions.

Aug 6, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. The visualization displays a grid of horizontal and vertical striped bars, which are masked to create two overlapping circular windows that reveal different parts of the pattern. The code builds an SVG canvas sized to the browser window, generates 100 horizontal and vertical rectangles each, and applies two distinct SVG masks with opposing black-and-white circular cutouts to produce the final layered effect. The rendering uses D3's `select`, `range`, and fluent `.join().attr()` chain for efficient element creation.

Aug 5, 2024

Loading thumbnail…

Sol LeWitt Repro

This piece renders ten concentric circles in an SVG, creating an abstract geometric composition inspired by Sol LeWitt. The circles are centered horizontally and anchored at the bottom of the viewport, with their radii increasing in a linear progression. The rendering uses the SVG API directly, creating elements via `document.createElementNS` and setting attributes such as `cx`, `cy`, `r`, and `stroke-width`. The stroke width is proportional to the circle spacing, producing a clean, rule-based visual pattern. The code generates the artwork programmatically without any external data source.

Aug 2, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes within a static 1000-pixel canvas. It displays circles, a rectangle, a line, and a path, each using distinct visual properties like fill colors, stroke colors, and stroke widths. The code directly uses the SVG API to define shapes, with the path specifying a polyline through its `d` attribute. The rendering is entirely client-side, using the native SVG element embedded in an HTML document.

Jul 29, 2024