jisu9393@naver.com

@Sueee123·9 public vizzes

Sol LeWitt 5

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars overlaid with two SVG masks. The masks use D3 symbol shapes—such as circles, crosses, and diamonds—cut out in contrasting black-and-white patterns, which create intersecting geometric voids across the striped lines. The rendering is fully vector-based SVG, computed dynamically from 100 data points per axis via `d3.range` and styled through `svg.append("mask")` with `d3.symbol`. The code relies on D3 selections and joins to build the layered composition.

Dec 20, 2024

Loading thumbnail…

Sol LeWitt 5

A reproduction of a Sol LeWitt wall drawing generates a grid of thin horizontal and vertical lines that are selectively masked to reveal a diamond shape at the center. The code uses D3 v7 to append SVG rectangles and masks, employing `d3.range` to create 100 strips per orientation. Two SVG masks, one inverted, define the diamond by hiding or showing line segments, with the shape drawn via `d3.symbol` and `symbols[1]`. The rendering is purely procedural, using `window.innerWidth` and `window.innerHeight` to fill the viewport.

Dec 20, 2024

Loading thumbnail…

Fork of Fork of Fork of Sol LeWitt 4

This example draws a generative interpretation of a Sol LeWitt wall drawing. It creates a grid of horizontal and vertical bars across the full browser window, with each bar masked by a large circular symbol. The piece uses D3.js APIs such as `select`, `range`, and `symbol` to construct the SVG output, applying two complementary masks that invert the visibility of the intersecting lines. The result is a dynamic, pattern-based composition that adapts to the viewer’s screen dimensions.

Dec 20, 2024

Loading thumbnail…

Fork of Fork of Sol LeWitt 3

A generative artwork reproduces Sol LeWitt's geometric style using stacked horizontal and vertical rectangles. The piece displays a grid of thin colored bands that intersect within a circular boundary, creating a woven optical effect. Built with D3.js, the visualization uses SVG masks to reveal the pattern through two complementary circle masks. The code generates 100 rectangles in each orientation, rendered dynamically across the full browser window, showing how systematic repetition and masking can produce intricate visual textures from simple shapes.

Dec 19, 2024

Loading thumbnail…

Fork of Sol LeWitt 2

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser window. Two SVG masks create circular cutouts, with inverted black-and-white fills revealing the stripes only within the central circle while inverting the pattern outside it. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to layer 100 rectangles in each orientation, with the circle radius fixed at 200 pixels regardless of viewport size.

Dec 19, 2024

Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt-style wall drawing using a grid of thin vertical bars. It displays a full-screen SVG composed of 100 equally spaced rectangles, creating a minimalist pattern of lines across the viewport. The code generates each rectangle using the Document Object Model’s `createElementNS` method and sets its position and size with `setAttribute`. The bars are spaced 20 pixels apart, with a width of 10 pixels and a height matching the window, resulting in a clean, repetitive visual composition.

Dec 18, 2024

Loading thumbnail…

Fork of Sol LeWitt 2

This example reproduces a Sol LeWitt wall drawing as an abstract, geometric visualization. It shows a series of 100 thin, horizontal rectangles stacked vertically across the full height of the browser window, forming a simple striped pattern. The piece is rendered using the SVG API, creating each `rect` element dynamically via `document.createElementNS`. The code sets the width of each rectangle to match the viewport width, while the vertical position and height are determined by a loop increment, producing a clean, repetitive composition in the style of the original artwork.

Dec 18, 2024

Loading thumbnail…

Psuedo Scatter Plot

This example, titled “Pseudo Scatter Plot,” presents a single, thick black polyline that zigzags across a plain white SVG canvas. The path, with its round line caps and joins, suggests a minimalist scatter plot or line chart, though it plots no data points. Rendered using Scalable Vector Graphics (SVG), the code defines the line with a `path` element, setting a 30-pixel stroke width. The visualization relies on standard HTML, CSS, and JavaScript, with text styled using the ‘Share Tech’ font from Google Fonts, all contained within a fixed 731 by 378 viewBox.

Dec 13, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes drawn directly in an HTML document, including circles, a rectangle, and a path. It shows how SVG elements can be styled with attributes like `fill`, `stroke`, and `stroke-width`, and how shapes are positioned using coordinates on the SVG canvas. The code uses vanilla JavaScript and CSS, with all shaping defined through raw SVG markup. The rendering approach relies on the browser’s native SVG support, requiring no external libraries. The example also includes commented-out lines, illustrating how elements can be toggled or edited during development.

Dec 12, 2024