Trevor Brown

@tbrown034·5 public vizzes

Vert of SOl LeWitt (TB)

This example shows a grid of horizontal red and white stripes, but only inside a circular mask centered on the screen. The stripes extend across the full canvas, while the mask limits their visibility to a 200-pixel-radius circle. The code builds an SVG scene using `document.createElementNS`, creating 100 `rect` elements with a fixed height and vertical spacing. A `mask` containing a single `circle` element applies the clipping effect, and all rectangles reference the mask via the `mask` attribute. No data source is used; the visualization is purely generative.

Feb 6, 2023

Loading thumbnail…

SOl LeWitt (TB)

This example presents a minimalist generative composition inspired by Sol LeWitt’s geometric wall drawings. It displays 100 vertical rectangular bars, each 10 pixels wide, evenly spaced 20 pixels apart across the full browser window. The code constructs the artwork using raw SVG elements created via the `document.createElementNS` API, appending them to an SVG container sized to `window.innerWidth` and `window.innerHeight`. The algorithm iterates with a simple loop, setting each rectangle’s `x` position incrementally, resulting in a rhythmical grid pattern without any interactivity or data input.

Feb 6, 2023

Loading thumbnail…

SOl LeWitt (TB)

This example reproduces a Sol LeWitt wall drawing as an interactive SVG composition. The piece displays a single red square against a blank canvas, rendered through programmatic SVG element creation. The code uses the raw DOM API with `document.createElementNS` to construct the SVG namespace elements, setting explicit width and height attributes on the root `svg` and the nested `rect` shape. The artwork draws directly from LeWitt’s conceptual instructions, translated into minimalist geometric form without additional data input.

Feb 6, 2023

Loading thumbnail…

Psuedo Bar Chart

A pseudo bar chart displays three solid color rectangles, blue, red, and yellow, of varying lengths that resemble horizontal bars, with the labels A, B, and C positioned to their left. Each colored rectangle is rendered as an SVG `<rect>` element with a fixed height of 120 pixels, while the width varies per bar to imply different categorical values. The chart is built with raw SVG markup inside an HTML document, using inline `fill` colors and a linked Google Fonts stylesheet for the label typography, with no external JavaScript libraries involved.

Feb 6, 2023

Loading thumbnail…

SVG Fundaments (TB)

A minimalist demonstration of SVG primitives. Seven large black circles are positioned on a white background against a 892x607 viewBox, specified using literal `cx` and `cy` coordinates rather than a data-driven layout. The circles’ fill is hard-coded to `#1A1919`. The example showcases basic SVG shapes—rectangles and circles—through raw markup in an `index.html` file, with no external JavaScript libraries or data sources.

Feb 6, 2023