Skip to main content
SimilarExport ZIP
100%

Fork Sol LeWitt Exercise

✓ Published1🌍 Public
Llukasilg.sol@gmail.com
Last edited Apr 30, 2024
Created on Apr 30, 2024

This example generates an abstract geometric composition inspired by Sol LeWitt, showing a grid of horizontal and vertical stripes that intersect. Two SVG masks define an elliptical region at the center; the first mask reveals the horizontal stripes within the ellipse, while the second inverts the effect for the vertical stripes. The code uses the raw Document Object Model (DOM) API with `createElementNS` to build SVG elements, setting attributes like `mask` and `fill` directly. It draws 100 rectangles in each direction, producing a layered, monochromatic pattern where the ellipse creates a focal point of contrasting stripe orientations.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork Sol LeWitt Exercise

This example generates an abstract geometric composition inspired by Sol LeWitt, showing a grid of horizontal and vertical stripes that intersect. Two SVG masks define an elliptical region at the center; the first mask reveals the horizontal stripes within the ellipse, while the second inverts the effect for the vertical stripes. The code uses the raw Document Object Model (DOM) API with `createElementNS` to build SVG elements, setting attributes like `mask` and `fill` directly. It draws 100 rectangles in each direction, producing a layered, monochromatic pattern where the ellipse creates a focal point of contrasting stripe orientations.

Llukasilg.sol@gmail.com
100% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

HHéloïse Feldmann
90% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using SVG masks and repeated rectangles to create intersecting striped patterns. A circular mask reveals portions of horizontal and vertical bars, while the second mask inverts the visibility to produce a checkerboard-like overlap. The page uses raw JavaScript with `document.createElementNS` to build the SVG dynamically, sizing elements to the full browser window. No external libraries are required, and the work is a direct homage to the artist’s instructional art.

Ssavalifestus75@gmail.com
90% 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
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt–style geometric drawing using raw SVG and JavaScript. It displays a grid of alternating horizontal and vertical stripes that are revealed through two circular mask regions at the center of the canvas. The code creates an SVG element, defines two mask layers—one with a white circle on black and another with a black circle on white—and appends 100 horizontal and 100 vertical rectangles. Each rectangle is clipped by one of the masks, producing the contrasting stripe pattern without any external libraries.

Nnim@brejnholt.dk
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example creates a grid of thin horizontal and vertical rectangles using SVG, with two circular masks that reveal and hide portions of the lines. The pattern is generated through two loops that position 100 rectangles each, alternating their orientation. SVG mask elements define the visible area: one mask exposes a central circle of horizontal lines, while the other inverts the circle to show vertical lines outside the center. The rendering uses native JavaScript DOM manipulation via `createElementNS` to build the SVG structure dynamically, with no external libraries.

Zzaioris
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements and mask manipulation. The visualization renders a series of overlapping horizontal and vertical stripes by creating rectangles and applying circular SVG masks to confine their visibility, producing a geometric composition. The code uses DOM manipulation via `createElementNS` and `setAttribute` to construct the SVG, with two distinct masks (`circle-mask` and `circle-mask-2`) controlling different stripe patterns. The result is a monochromatic, grid-based artwork where varying rectangle heights and widths generate a rhythmic, minimalist pattern across the full viewport.

NNeel Mehta
88% match
Loading thumbnail…

Fork of Epis 4 sol lewitt

This example generates a grid of horizontal and vertical striped rectangles overlaid with two complex masks, creating an interplay of geometric forms inspired by Sol LeWitt. The SVG is rendered using D3’s `select`, `range`, and `join` to place the stripes, while custom mask paths are built with D3’s `symbol` and `symbols` API, drawing five distinct shapes at intervals. The first mask uses an inverted fill, the second a non-inverted fill, producing contrasting cutout effects across the composition. The visualization is fully responsive, sizing to the window dimensions.

SSGPPellow
88% match