Fork of lewis art

100%

Fork of lewis art

✓ Published1🌍 Public

Last edited Jan 22, 2023

Created on Jan 20, 2023

This example renders intersecting horizontal and vertical line patterns within a circular boundary on an SVG canvas. It uses the SVG Mask API and multiple `mask` elements to selectively reveal or hide line segments, creating a geometric art composition. The code constructs rectangles dynamically with `document.createElementNS` and positions them at regular intervals based on the canvas dimensions. The rendering logic relies on native JavaScript math functions like `Math.ceil` and `Math.min` to calculate line counts and spacing.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of lewis art with D3

This example generates a geometric pattern of horizontal and vertical rectangles overlaid on an SVG canvas. The rectangles are masked by circular regions, creating an intersecting grid with a circular reveal effect centered within the 960 by 500 viewport. The code uses D3.js version 7.8.2 to build the SVG elements, compute range data for the grid lines, and apply SVG masks to control visibility. The pattern emerges from alternating masks: one with a white circle on a transparent background and another with a black circle on a white background, producing a crosshatch-like composition.

Pparag776

90% match

Loading thumbnail…

Fork of Fork of Sol Lewwit 3

This interactive SVG artwork creates a grid of vertical and horizontal lines, with a circular void in the center formed by masking. The visualization uses SVG masks (`circle-mask` and `circle-mask2`) to show vertical lines inside a white circle and horizontal lines outside it, resulting in a dynamic, layered composition. Built with vanilla JavaScript using `document.createElementNS`, it generates 100 rectangles per axis, with the central circle positioned at the viewport center. The design adapts to the browser window size, demonstrating a creative use of SVG masking for generative art.

PPeiyang Li

82% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch

81% match

Loading thumbnail…

Fork of SVG Fundamentals Horizontal

This example demonstrates SVG masking by confining a pattern of horizontal and vertical lines to a circular region at the center of the screen. The code generates 100 horizontal strips and 100 vertical strips using the `document.createElementNS` API, while a mask containing a white circle over a black rectangle restricts visibility of the horizontal lines. The result is a grid where only the intersection inside the circle remains visible, created entirely with vanilla JavaScript and no external libraries.

SSidney Oluoch

81% match

Loading thumbnail…

Fork of LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, generating a grid of horizontal and vertical bands across the full viewport. It employs two SVG `mask` elements with circles at the center to selectively reveal the overlapping stripes, creating a circular intersection pattern. The code constructs all elements dynamically via the DOM API, setting the window dimensions as the canvas size and drawing 100 rectangles in each direction. This fork adapts the original concept to a vertical orientation, using nested rects and masks to achieve the geometric effect.

SShahin Alam

81% match

Loading thumbnail…

Fork of Fork of Fork of Sol Lewitt Reproduction Vertical 4

This example creates a generative geometric composition inspired by Sol LeWitt, displayed as horizontal and vertical stripes across the screen. Two SVG masks—one with a white circle on black, another with a black circle on white—reveal alternating sets of striped rectangles, producing a crosshatch pattern where the stripes overlap. The visualization uses vanilla JavaScript with the DOM API to construct SVG elements dynamically, setting the width and height based on the browser window. It shows how masking and nested loops can generate a structured, Op-Art-like visual effect without external libraries.

Eelgato_1994

81% match

Loading thumbnail…

Fork of Sol Lewit Repro1

This visualization uses 100 horizontal and 100 vertical rectangular strips, each 10 pixels thick, arranged in a grid across the full screen. A central circular mask reveals the intersection of these strips, creating a crosshatch pattern within a 200-pixel radius circle. Built with vanilla JavaScript and the SVG DOM API, it dynamically creates SVG elements like `<rect>`, `<mask>`, and `<circle>` to apply the masking effects. The code demonstrates careful manipulation of SVG masks, where the first mask uses a black background with a white circle and the second inverts this logic, producing alternating visibility in the overlapping regions.

HHayden-V

80% match

Loading thumbnail…

Fork of so lewit reproduction D3.js fundamental

This example manipulates SVG masks to create a dynamic visual composition of overlapping horizontal and vertical stripes. The main view is a grid of 100 rectangles that cycle through a circular mask, revealing a sunburst-like pattern from the center. A second set of rectangles uses an inverted mask to create a contrasting cross-hatch effect. The code uses the D3.js library (v7) to construct the SVG elements and apply the masking logic via the `append` and `attr` methods.

Yyoav95

80% match