Jinpeng Li

@JPeojakm·6 public vizzes

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

Mar 21, 2023

Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

A vertical grid of thin black and white rectangles creates a striped pattern, with a circular mask revealing a central white circle against black. A second mask inverts the effect, producing a contrasting ring of horizontal and vertical lines. The piece is generated entirely with native SVG and JavaScript, using dynamically created `rect` elements and two circle-based masks to layer the visual composition. It is a reproduction of a Sol LeWitt art piece.

Mar 17, 2023

Loading thumbnail…

Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-style geometric art piece using raw SVG and JavaScript. It shows a full-screen vertical grid of thin horizontal and vertical lines, with a central circular region highlighted by a mask. The rendering relies on the SVG `mask` element and dynamically created `rect` elements, using standard DOM APIs like `document.createElementNS`. The horizontal lines are clipped to a circle via the mask, while vertical lines span the full height, creating a layered, minimal composition.

Mar 17, 2023

Loading thumbnail…

Sol Lewitt Reproduction

This piece reproduces a Sol LeWitt-style generative drawing using only vertical bars. The work shows a series of 100 thin rectangles evenly spaced across the full width of the browser window, creating a regular, rhythmic grid-like pattern. The code generates the artwork by creating an SVG element and appending a rect for each iteration of a JavaScript loop, setting each bar’s x position to increment by 20 pixels while maintaining a constant width and height. The scene fills the entire viewport, as the SVG dimensions are set to the window’s inner width and height.

Mar 16, 2023

Loading thumbnail…

Pseudo Scatplot

A pseudo scatter plot presents five black circles scattered across a white canvas, each acting as an abstract data point, alongside a single text element stating “Lucas is handsome.” The visualization approximates a traditional scatter plot without encoding quantitative variables, using an SVG `circle` element for each point. The static layout, defined by explicit `cx` and `cy` coordinates, is rendered inline in the HTML via the `svg` tag, with the text styled using the Share Tech font. The artwork demonstrates a minimalist, manual approach to plotting data.

Mar 11, 2023

Loading thumbnail…

JP-SVG foundamental

This example displays foundational SVG shapes, including circles, rectangles, ellipses, lines, polygons, and paths, rendered directly in an HTML document without external libraries. It uses the SVG namespace with attributes like `cx`, `ry`, `stroke-width`, and `points` to define each primitive, alongside fill and stroke styling. The code demonstrates both filled and transparent shapes with varied stroke colors, as well as a quadratic Bézier path via the `d` attribute. A static 1260×500 SVG canvas holds all elements, showing basic geometric drawing and styling techniques in a single view.

Mar 8, 2023