Sol Lewitt SVG Artwork

100%

Sol Lewitt SVG Artwork

✓ Published0🌍 Public

Last edited May 15, 2023

Created on May 15, 2023

This example renders geometric SVG artwork inspired by Sol LeWitt, using a React framework with hard-coded SVG elements. The visualization displays a series of colorful, grid-based compositions with varying line patterns, shapes, and color blocks arranged across a 960x500 canvas. The code defines these patterns directly in the SVG markup, creating a static, non-interactive piece that emphasizes the artist's systematic approach to form and color. The rendering relies entirely on native SVG capabilities within the React component structure.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing as an interactive SVG visualization. The page renders a 960-by-500 SVG canvas and uses plain CSS and JavaScript, with React as the framework, to generate geometric shapes. The drawing consists of vertical and horizontal lines in a grid pattern, executed in black and white. The code includes a minimal HTML wrapper and a script that logs to the console, but the core geometry is defined through the SVG elements. The rendering relies on React’s component structure and SVG’s native shape primitives to compose the artwork.

BBenLeathers

88% match

Loading thumbnail…

Sol Lewit

This example generates a grid of colored squares that reorganize into a circular pattern, inspired by the geometric art of Sol LeWitt. Using raw SVG elements created via the DOM API, it renders 960 by 500 pixels of animated transformations. The code relies on JavaScript to manipulate square positions and colors in a looping sequence, though no external libraries like D3 are imported. The result is a minimalist, abstract visualization that explores repetition and systematic variation.

AAdnan Niazi

88% match

Loading thumbnail…

Sol LeVitt

A red circle with horizontal white stripes and vertical white stripes creates a grid-like pattern, demonstrating a minimalist geometric composition. The artwork uses inline SVG elements within an HTML page, including a circle filled with red and rectangles filled with white to form the stripes. The SVG canvas is fixed at 400 by 400 pixels, with the circle positioned accordingly. This example showcases how basic SVG shapes can be combined to recreate the visual style of Sol LeWitt's wall drawings, using only HTML and CSS with no JavaScript.

MmyN3RD

87% match

Loading thumbnail…

Sol Lewitt Reproduction SVG

This example reproduces a Sol LeWitt-style geometric drawing using SVG, showing a grid of horizontal and vertical stripes that are masked to reveal a central circle. The visualization dynamically fills the browser window by setting the SVG width and height to the viewport dimensions. It constructs two SVG masks with white and black circles and rectangles, then renders 100 horizontal and 100 vertical stripe rectangles, each referencing a mask to clip the pattern. The code uses the DOM API `document.createElementNS` to build SVG elements programmatically with JavaScript.

Mmaximus2581

86% match

Loading thumbnail…

Sol Lewitt Reproduction

This piece is a generative art reproduction of a Sol LeWitt wall drawing, rendered as an SVG. The composition uses a constrained, systematic arrangement of lines and shapes to evoke the artist's conceptual style. Built with React, the programmatically generated SVG leverages the framework's declarative structure to construct the vector-based artwork. The reproduction demonstrates how computational methods can reinterpret the rules-based aesthetics of minimalist art within a modern web development context.

Ssavalifestus75@gmail.com

86% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

86% match

Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie

86% match

Loading thumbnail…

Sol LeWitt

This visualization recreates a Sol LeWitt-inspired geometric drawing using pure SVG. It shows a grid of vertical and horizontal black lines intersecting across the full screen, but with their density inverted between the center and the periphery. In the middle, only horizontal lines appear in a circular region, while vertical lines dominate the surrounding area. The effect is achieved using two SVG masks—a peripheral mask and a center mask—that selectively reveal or hide the line sets. The code uses the native `document.createElementNS` API to construct SVG elements dynamically.

JJeya Balaji Balasubramanian

85% match