Jacky Wu

@JackyWuCoder·4 public vizzes

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style wall drawing using only the native Web API, generating a grid of horizontal and vertical bars contained within a circular boundary. The visualization shows a large central circle filled with evenly spaced black horizontal strips, while the area outside the circle displays similarly spaced vertical strips against a white background. The code builds an SVG scene, using two SVG `mask` elements to selectively reveal the horizontal and vertical rectangles. It constructs each rectangle individually in JavaScript loops, with the masks controlling which bars appear inside or outside the circle based on their fill colors.

Feb 27, 2025

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style geometric composition using dynamically generated SVG shapes. As the page loads, the code creates a full-viewport SVG canvas and populates it with a repeating grid of narrow vertical rectangles, producing a uniform striped pattern reminiscent of LeWitt’s wall drawings. The implementation builds the entire scene through the raw SVG DOM API, calling `document.createElementNS` and `setAttribute` to position each rectangle. The stripes are drawn with fixed 20-pixel spacing and a 10-pixel width, which means the pattern’s density scales with the browser window’s width as the viewport resizes. No external libraries are used; the underlying JavaScript directly manipulates the SVG elements without a helper framework.

Feb 27, 2025

Loading thumbnail…

Pseudo Network

This example presents a pseudo network as a static SVG diagram, showing a set of nodes and edges without a force-directed layout. It displays nine black circles of equal size connected by black polylines, suggesting a graph structure across a white canvas. The rendering relies on raw SVG elements defined directly in HTML, with circle and path tags specifying node positions and link coordinates. The visualization uses no JavaScript libraries, relying instead on hand-coded SVG markup to approximate a network diagram.

Feb 27, 2025

Loading thumbnail…

SVG Fundamentals

This example demonstrates a low-budget Canadian flag constructed entirely from basic SVG shapes. The visualization shows a flag layout with a red maple leaf built from a triangle and a rectangular stem, set against white and red rectangular bands. The code uses raw SVG elements, including `<rect>` for the flag's stripes and stem, and `<polygon>` for the leaf. All shapes are defined directly in the `index.html` file with explicit coordinates and fill colors, rendering the static graphic without any external libraries.

Feb 27, 2025