jajinkyaa

@jajinkyaa·5 public vizzes

Fork of Sol Levitt's Art Reproduction2

This visualization reproduces a Sol LeWitt-inspired drawing using intersecting horizontal and vertical striped rectangles, with two mask layers creating a circular cutout effect. The piece shows a dense grid of lines that forms a geometric composition with a central diamond-shaped aperture. Built with React and D3.js, the code uses `select`, `range`, `symbol`, and `symbols` to generate SVG elements, while custom masks (`circleMask` and `circleMask2`) combine black-and-white fills to blend the line patterns selectively. The result is a dynamic interplay of overlapping stripes and negative space, rendered responsively to the browser window dimensions.

Oct 30, 2022

Loading thumbnail…

Sol Levitt's Art Reproduction

This visualization reproduces Sol LeWitt's geometric art using overlapping horizontal and vertical striped rectangles, masked to form a circular composition in the center of the viewport. The piece shows a grid-like pattern of alternating bands that intersect within a defined circular boundary against a contrasting background. The code uses D3.js selections and data joins (`selectAll`, `data`, `join`) to generate 100 horizontal and 100 vertical SVG rectangles across the full window dimensions. Two SVG masks (`circleMask`, `circleMask2`) apply inverted circle shapes to reveal or hide portions of the layered stripes, creating the characteristic LeWitt-style interplay of line and form.

Oct 30, 2022

Loading thumbnail…

Sol Levitt's Reproduction Vertical

This example generates a dynamic, grid-based composition inspired by Sol LeWitt’s geometric art. It uses JavaScript and the SVG API to draw two sets of alternating horizontal and vertical rectangles. A circular mask is applied to the first set, creating a central circular window, while an inverse mask on the second set produces a complementary ring effect. The code constructs SVG elements programmatically via `createElementNS`, setting rectangles and masks in a loop to form the final pattern.

Oct 30, 2022

Loading thumbnail…

Lecture 3

This example demonstrates a full-screen SVG visualization of 100 vertical rectangles, each with a fixed width of 10 pixels and spacing of 20 pixels, filling the entire viewport height. It uses the Document Object Model API’s `createElementNS` method to construct SVG elements—specifically the `<svg>` and `<rect>` tags—within the `http://www.w3.org/2000/svg` namespace. The rectangles are generated in a JavaScript loop, with their `x` positions advancing by 20 pixels per iteration, creating a striped pattern across the window. The code sets the SVG’s width and height to the browser’s inner dimensions, ensuring the visualization scales responsively.

Oct 30, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates the foundational structure of an SVG graphic, combining basic shapes to form a static, abstract composition. It uses a large, semi-transparent green circle as a background element, overlaid with a red, thick-stroked path that creates an organic, irregular line. Below these, three black rectangles are positioned to suggest a simple interface or layout block. The rendering relies purely on SVG elements (`circle`, `path`, `rect`) and CSS classes, with all coordinates defined via the `viewBox` attribute, resulting in a lightweight, code-driven illustration without external libraries.

Oct 29, 2022