createdby.thaonguyen@gmail.com

@Lawnnguyen·4 public vizzes

Fork of Fork 2025 Lawn Viz - 2

A generative visualization inspired by Sol Lewitt renders 100 rotated rectangles, each stacked diagonally from the top-left toward the center. The code creates SVG `rect` elements via the raw DOM API, applying a uniform 45-degree rotation around the viewport midpoint. Rectangle heights scale with their index, while fill colors cycle through hues using the `hsl()` function. The piece runs in a browser, using no external visualization libraries, and is annotated with the "Jersey 10" font, which appears unused in the final output.

Jan 13, 2025

Loading thumbnail…

Fork 2025 Lawn Viz -V

This example renders a generative, pseudo-plotted visual inspired by Sol LeWitt, using a series of horizontal and vertical rectangles. The SVG drawing is filtered through two circular masks, creating a central circular window where the grid lines intersect with inverted visibility. The code builds the SVG programmatically via `document.createElementNS`, appending 100 horizontal and vertical rects, with the masks controlling which lines appear in the foreground. A large “Fork 2025” text label is styled with the Jersey 10 font, completing the minimalist, plotter-like aesthetic.

Jan 13, 2025

Loading thumbnail…

Fork of 2025 Lawn Viz

This example reproduces a Sol LeWitt-inspired drawing by generating a series of vertical SVG rectangles across the width of the viewport. One hundred thin black bars are evenly spaced, creating a dense, rhythmic pattern that fills the full screen height. The code builds the visualization dynamically using raw DOM manipulation methods like `document.createElementNS` and `svg.appendChild`, rather than a visualization library. The SVG canvas is sized to match `window.innerWidth` and `window.innerHeight`, and the page uses the Google Fonts “Jersey 10” typeface for text elements.

Jan 12, 2025

Loading thumbnail…

2025 Lawn Viz

A pseudo-plotted chart displays six gray circles at irregular positions against a white background, evoking a hand-drawn scatterplot without explicit axes or data points. The visualization uses raw SVG elements, with each circle defined by explicit `cx`, `cy`, and `r` attributes, and rendered via the `index.html` file. All circles share the same fill color (`#D9D9D9`) and radius (30). The layout suggests a playful or abstract representation of plotted data, relying purely on static SVG positioning rather than any dynamic data binding or interaction. The example is generated from a simple HTML structure with inline SVG, containing no external libraries or JavaScript logic.

Jan 11, 2025