eric.r.thornhill@gmail.com

@ethornhill·13 public vizzes

Sol LeWitt Horizontal Shapes D3

A generative grid of horizontal and vertical bars intersects through two circular masks, creating a play of striped rectangles against a contrasting background. Built with D3 v7, the visualization uses `select`, `range`, and data joins to render 100 line segments in each orientation. SVG masks define the overlapping circles: one reveals vertical stripes inside a white circle, while another reveals horizontal stripes outside it, producing an interlocking geometric composition.

May 14, 2025

Loading thumbnail…

Sol LeWitt Horizontal Circle D3

This example recreates a Sol LeWitt-inspired drawing using D3.js. It displays a grid of horizontal and vertical bars clipped to reveal a circle in the center. The visualization uses SVG masks to show the horizontal bars inside the circle and the vertical bars outside it. The code uses `d3.select` and `d3.range` to generate 100 rectangles in each direction, with the masks defining the visible regions.

May 14, 2025

Loading thumbnail…

Sol LeWitt X

This generative visualization creates an "X" composition using two overlapping white rectangles, with horizontal lines visible only inside the X and vertical lines appearing only outside it. Built with raw JavaScript and the SVG API, the sketch uses `<mask>` elements to control line visibility: a mask with black X shapes hides vertical strokes inside the form, while an inverse mask reveals horizontal strokes only within the X. Black horizontal and vertical bars are drawn in loops at 20-pixel spacings, each masked to achieve the alternating pattern across the full viewport. The piece dynamically sizes to the browser window and uses no external libraries.

May 12, 2025

Loading thumbnail…

Sol LeWitt Horizontal Cirle Moving

This example generates an interactive abstract composition inspired by Sol LeWitt, using pure SVG and JavaScript without external libraries. It draws 100 horizontal blue and 100 vertical yellow rectangles, each masked by a central circle to create a cross-like overlay effect. The rectangles respond to mouseover events, transitioning their fill color to magenta, then reverting to green or beige on mouseout, with CSS transitions providing smooth color fade animations.

May 8, 2025

Loading thumbnail…

Sol LeWitt Horizontal Cirle

A web page renders a dynamic, mask-based homage to Sol LeWitt's geometric art. The visualization displays a central circle composed of horizontal and vertical striped bands, created using SVG elements and CSS mask compositing. It draws 100 horizontal rectangles masked by a circular region, and 100 vertical rectangles masked by an inverse circle, all generated procedurally with JavaScript. The `document.createElementNS` API constructs SVG nodes, while `mask` and `circle` elements define the visible shape, resulting in a crisp, monochrome pattern that fills the browser viewport.

May 7, 2025

Loading thumbnail…

Fork of Sol LeWitt Vertical

This example recreates a Sol LeWitt-inspired wall drawing as a dense field of uniform vertical bars rendered in black on a full-window SVG canvas. It shows how simple repetition of a geometric primitive can produce a rhythmic, minimalist composition. The code uses the raw Document Object Model API, creating 100 `rect` elements via `document.createElementNS` and appending them to an SVG root. Each rectangle is positioned at twenty-pixel intervals, with a fixed width of ten pixels and a height matching the browser viewport, filling the entire display area.

May 7, 2025

Loading thumbnail…

Fork of SVG Fundamentals

This example generates a full-screen abstract composition by dynamically creating an SVG scene using the DOM API. It shows one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the viewport width, extending the full window height. The code uses the raw `document.createElementNS` method to build SVG `rect` elements without any external libraries, setting the SVG dimensions to the browser's `innerWidth` and `innerHeight`. The script then appends each rectangle sequentially, producing a rhythmic grid of uninterrupted lines.

May 6, 2025

Loading thumbnail…

Sol LeWitt - SVG Fundamentals

This example presents a two-row bar chart built with raw SVG elements in an HTML document. The graphic visualizes a small static dataset of two named values, 'A' and 'B', using JavaScript to log the data to the console. The rendering relies entirely on the browser's native SVG support, with the page layout set to remove default margins and hide overflow. The code serves as a fundamental demonstration of combining SVG markup with embedded script logic.

May 6, 2025

Loading thumbnail…

Fork of Pseudo Slope Graph

This example shows a pseudo slope graph comparing values at two points across multiple categories, with circles connected by slanted lines to suggest trends. The SVG output is pre-computed, containing hard-coded line and path coordinates rather than generated dynamically from data. The visualization is built using static SVG elements like lines and circles, with paths providing text labels for each category. There is no interactive behavior or data binding; the chart is entirely defined by the fixed coordinates in the markup. No JavaScript libraries or APIs are used in this rendering.

May 1, 2025

Loading thumbnail…

Fork of Pseudo Slope Graph

This fork of a pseudo slope graph presents a series of thin, black vertical line segments along the bottom of an SVG canvas, each paired with a short horizontal mark above it, suggesting a miniature comparison between two states or values. The paths are drawn using explicit SVG path data, with coordinates tightly clustered near the y-axis, creating a dense, almost pixel-like distribution across the 1450 by 624 viewport. The rendering relies on raw `path` elements with manual `M` and `L` commands, offering a minimal, code-driven approach to visualizing discrete data points without any interactive or dynamic behavior.

Apr 30, 2025

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG and CSS can create a simple geometric composition of four colored lines arranged diagonally on a canvas. The lines, defined with precise coordinates and varying stroke widths, produce an abstract visual pattern. The rendering relies on inline SVG elements within an HTML document, styled minimally through an external stylesheet, while the page title and header introduce a playful tone. The code uses the raw SVG API for line drawing, with no additional JavaScript libraries.

Apr 30, 2025

Loading thumbnail…

Pseudo Bar

This visualization presents a stylized bar chart, titled "Pseudo Bar," rendered as an SVG graphic. Three gray rectangular bars of varying heights and angles are set against a deep red, rounded background, with the word "Whassup whassup" in yellow as a prominent title. The example uses React and plain SVG elements, including dedicated `rect` and `text` tags, to construct the composition. Its design overrides standard page styling with custom CSS within the HTML document.

Feb 4, 2025

Loading thumbnail…

Fork of HTML Starter - ET

This example is a playful SVG playground built with React, featuring a variety of colorful, interactive shapes on a large canvas. It demonstrates CSS transitions on SVG elements, with paths, circles, and rectangles that smoothly animate their fill color and stroke width when hovered. The visualization includes a gradient-filled background, multiple geometric forms, and a complex, hand-drawn path, all rendered using standard SVG elements like `<path>`, `<circle>`, and `<rect>`.

Feb 4, 2025