steingartpeter

@steingartpeter·3 public vizzes

DFirstSteps

A minimal SVG canvas fills the browser window with 100 thin horizontal rectangles, all clipped by a circular mask that leaves only the ring of the circle visible. The page uses D3's `select` and `range` to generate and append rectangles with programmatic `y` offsets and a full-width `width`, while an SVG `<mask>` element paints black to hide the interior. This results in a simple black-on-transparent ring effect centered on the viewport.

May 25, 2022

Loading thumbnail…

SOLLeWitt repro

A minimalist reproduction of a Sol LeWitt wall drawing, rendered as an SVG of 960 by 500 pixels. The piece shows a grid of geometric forms, likely lines or arcs, that follow the artist's rule-based system. The code uses a static SVG structure with no external libraries, relying on plain JavaScript to generate the drawing. The empty script tag suggests the shapes are drawn programmatically, but the exact generation logic is not visible in the provided snippet. The result is a clean, black-and-white composition typical of LeWitt's conceptual art.

May 9, 2022

Loading thumbnail…

SVG_Basics

This example demonstrates the fundamental structure of an SVG graphic on a bare HTML page, using inline SVG elements to draw a single red circle on a gray canvas. The code uses standard SVG markup for the `<svg>` and `<circle>` tags, with CSS styling applied via the `style` attribute for the border and background color. The circle's position and size are controlled with `cx`, `cy`, and `r` attributes. The page requires no external libraries or JavaScript, relying solely on the browser's native SVG rendering. The example also includes a link to a React-based starter template in the README.

May 6, 2022