justinenns@hotmail.com

@sueandjustin·7 public vizzes

Sol Lewitt Repro HOR

This example renders a generative art piece inspired by Sol LeWitt’s geometric wall drawings. It displays one hundred horizontal striped rectangles across the full screen, clipped into a circular window at the center of the viewport. The code uses raw SVG DOM manipulation with `createElementNS` to build the elements, and applies an SVG `mask` with a `circle` to constrain the visible area. Although it loads D3 v7, the visualization relies only on native SVG features, not on any D3-specific functions.

Dec 30, 2025

Loading thumbnail…

Sol Lewitt Repro

This example reproduces a Sol LeWitt art piece by generating a series of vertical rectangles across the full screen. It creates 100 SVG rectangles, each 10 pixels wide, positioned at increasing x-coordinates, using plain JavaScript DOM manipulation to construct the SVG elements. The visualization uses D3 v7 only to load the library, while all rendering is done through native SVG APIs like `createElementNS` and `setAttribute`. The artwork fills the browser window dynamically using `window.innerWidth` and `window.innerHeight`.

Dec 30, 2025

Loading thumbnail…

Fork of Fork of SVG Ends

A 1000x1000 canvas displays a minimalist geometric composition: a solid green circle in the top-left corner and a larger solid red circle at the center, both rendered against a plain white background. The drawing uses the Canvas API’s `beginPath` and `arc` methods, with `fillStyle` set to the respective colors before each `fill` call. The canvas element is initialized to 1000 by 1000 pixels, and the entire scene is redrawn on a black-bordered canvas within a lavender page background.

Dec 29, 2025

Loading thumbnail…

Fork of SVG Ends

This example presents a static collection of primitive SVG shapes—circles, rectangles, and polygons—arranged in a grid-like composition on a 960×1500 canvas. It demonstrates fundamental SVG markup and styling using inline attributes like `fill`, `stroke`, `stroke-width`, and `transform` (specifically `translate` and `scale`). The code uses plain SVG syntax and defines figures ranging from simple color swatches to a repeated star-like polygon, showcasing basic coordinate placement and color values (hex, named, and rgba) without any JavaScript libraries or animation.

Dec 27, 2025

Loading thumbnail…

Fork of CV: Clickable Circles

This example shows a set of five circles arranged diagonally across an SVG canvas. Clicking a circle toggles its fill to white with a black stroke, while all others remain black, using React state to track the selected circle’s ID. The visualization is rendered with D3 v7, where select and join manage circle elements, and the click handler updates React state via a callback.

Dec 24, 2025

Loading thumbnail…

Flags of Europe

This example demonstrates how simple SVG shapes can be combined to create stylized representations of European flags, with a grid of rectangles and lines forming recognizable national symbols. The code uses raw SVG elements like `<rect>`, `<line>`, and `<polygon>` to construct flag patterns, showcasing basic vector graphics principles without any external visualization libraries. The rendering is static, with colors and geometry defined directly in the markup, and includes elements that loosely suggest flags from countries such as France, Germany, and others.

Dec 17, 2025

Loading thumbnail…

SVG Funds

This example demonstrates fundamental SVG shape creation through a collection of circles, rectangles, and polygons composed directly in HTML markup. The visual composition arranges basic geometric forms to create simple flag-like patterns and abstract groupings, with specific color values assigned via fill attributes. The code uses SVG element properties including `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and polygon `points`, alongside a `transform` for scaling. The static scene is defined entirely within the `index.html` file, without JavaScript libraries or external data sources.

Dec 16, 2025