WeeeLi

@Jerry-Lizi·6 public vizzes

More-practice-shapes Sol LeWitt Reproduction with D3

This reproduction of a Sol LeWitt drawing uses D3 to generate a grid of alternating black and white horizontal and vertical bands. The SVG canvas is divided into 120 intervals, each containing thin rectangular strips. Two masks, created with D3’s `scaleBand` and `symbol` API, overlay the bands with repeated symbolic shapes, with one mask inverted to produce a contrasting pattern. The rendering is fully vector-based, scaling to the browser window’s dimensions.

Oct 30, 2023

Loading thumbnail…

D3_First_Exercise

A full-screen SVG grid of thin black horizontal and vertical lines is masked to reveal two offset circular cutouts in the center of the canvas. The piece is a direct reproduction of a Sol LeWitt art concept, rendered using D3 v6. The code builds the lines by binding `d3.range(n)` data arrays to `rect` elements via `.join()`, while two layered SVG `<mask>` elements (one black rect with white circle, one white rect with black circle) define the visible apertures.

Oct 30, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction--LectureRepresentation

This visualization reproduces a Sol LeWitt-style geometric composition using generative SVG elements. It renders 100 horizontal and 100 vertical rectangular strips across the full viewport, with two circular masks applied to selectively reveal or hide portions of the strip patterns. The first mask exposes a central 200-pixel-radius circle against a black backdrop, while the second inverts the effect on the perpendicular strips. Built with raw JavaScript and the SVG API, the code dynamically creates the `svg`, `mask`, `rect`, and `circle` nodes without external libraries.

Oct 29, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

A fork of a Sol LeWitt reproduction generates an abstract geometric composition from two overlapping SVG mask patterns. It shows alternating horizontal and vertical striped bands intersecting in a grid, with a circular cutout revealing the layered structure. The code builds an SVG scene using raw DOM APIs (`document.createElementNS`) and applies two circular masks (`circle-mask` and `circle-mask-2`) to control which stripes appear inside the central circle. A series of 100 rectangles for each orientation form the visual output, with no external data or libraries beyond the browser's native SVG support.

Oct 27, 2023

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals--gradient

This example animates a stylized sunrise and sunset using only SVG and embedded SMIL animations. It uses a `radialGradient` for the sky and two `linearGradient` fills for layered landscape paths, with the sun’s vertical position and gradient stop colors cycling over 15 seconds. The scene relies on `defs`, `animate` elements, and Bézier path curves, with no external JavaScript libraries.

Oct 27, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shape rendering, showing how circles, lines, paths, and rect elements are composited in a top-down drawing order. It highlights the overlapping circle technique, where a green circle is drawn on top of a larger red one, as well as stroke styling on line and path elements. The rendering relies solely on native SVG APIs within an HTML document, with a hidden-overflow body and a fixed 960×500 viewport. The path uses absolute and relative commands, while the rect is commented out to show compilation behavior.

Oct 27, 2023