MonWas

@MonWas·5 public vizzes

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

May 13, 2022

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using SVG, layering horizontal and vertical bands that are clipped by circular masks. The piece shows a 200-pixel radius circle centered on the canvas, where alternating stripes of a solid hue and the page background are exposed through two distinct mask configurations. The first mask reveals the horizontal bands within the circle, while the second reveals the vertical bands outside it, creating an optical interplay. The code uses JavaScript’s `document.createElementNS` to generate SVG elements, setting attributes like `width`, `height`, and `mask` directly on each shape.

May 12, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style drawing using an SVG canvas that fills the browser window. It generates 100 vertical rectangular stripes, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the viewport. The code creates SVG elements dynamically via the `createElementNS` API and sets attributes like `x`, `width`, and `height` directly, without any external libraries. The rendering approach relies purely on JavaScript and SVG, with no data source or interaction beyond the static geometric composition.

May 11, 2022

Loading thumbnail…

Untitled

This example reproduces a Sol LeWitt wall drawing as an interactive visualization, showing how a set of algorithmic rules generates a complex geometric composition. A force-directed layout using `d3.forceSimulation` positions a grid of nodes, while SVG paths are drawn with `d3.line` and `d3.curveBasis` to create the characteristic arcs and straight segments. The code reads a local data file defining the drawing’s parameters and renders them in a browser window, with user interaction via mouse events to pause or restart the simulation. The result is a faithful, animated tribute to LeWitt’s instructions-based art.

May 11, 2022

Loading thumbnail…

SVG Fundamentals

This example displays a static SVG visualization of a patterned rectangular canvas with a subtle drop shadow and crisp edge rendering. The code embeds an SVG element directly in HTML, using filter operations like `feDropShadow` and `feGaussianBlur` to create depth, while a `pattern` element references an embedded image via `xlink:href`. It demonstrates fundamental SVG layout with explicit `width`, `height`, and `viewBox` attributes, alongside CSS-free styling through inline XML attributes. The example serves as a minimal introduction to SVG structure and compositing effects.

May 11, 2022