Skip to main content
SimilarExport ZIP
100%

Sol LeWitt - SVG Fundamentals

✓ Published0🌍 Public
Eeric.r.thornhill@gmail.com
Last edited May 6, 2025
Created on May 1, 2025
Forked from SVG Fundamentals

This example presents a two-row bar chart built with raw SVG elements in an HTML document. The graphic visualizes a small static dataset of two named values, 'A' and 'B', using JavaScript to log the data to the console. The rendering relies entirely on the browser's native SVG support, with the page layout set to remove default margins and hide overflow. The code serves as a fundamental demonstration of combining SVG markup with embedded script logic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Le Witt Reproduction Original

This example reproduces a Sol LeWitt-inspired drawing using an SVG bar chart approximation. It shows a grid of thin, evenly spaced horizontal and vertical bars that intersect within a central circular region, creating a woven geometric pattern against a plain background. The visualization uses two SVG masks (`circle-mask` and `circle-mask-2`) to clip alternating sets of 100 rectangles—horizontal bars masked by a white circle, and vertical bars masked by a black circle—so only the overlapping area reveals the full crosshatch effect. The bars are generated procedurally via raw DOM manipulation with `createElementNS` and positioned based on the window dimensions.

AAmauri Ribeiro
81% match
Loading thumbnail…

Sol Lewitt in SVG

The example generates a minimalist geometric composition inspired by Sol Lewitt, using a series of uniformly spaced vertical silver rectangles that stretch the full height of the browser window. It shows a systematic grid of 100 thin bars created entirely with dynamic SVG elements. The code builds the visualization by appending SVG `rect` nodes to the document, setting each bar’s x-coordinate incrementally at intervals of 20 pixels with a fixed width of 10. It relies on the raw Document Object Model API, including `document.createElementNS` and `setAttribute`, to construct the scene in plain JavaScript without external libraries.

KKirsten Lund
80% match
Loading thumbnail…

Bar SVG Fundamentals

This example demonstrates a basic bar chart rendered entirely as static SVG elements, with a grey background and four dark bars of varying heights. The chart uses raw SVG markup within an HTML page, with each bar drawn using a `<rect>` element that specifies its x and y position, width, height, and fill color. The visualization relies on manual coordinate and dimension values rather than any data-binding or layout algorithm, showing the fundamental building blocks of SVG-based graphics in a React-free, bare-minimum HTML context. The chart’s values are hard-coded, so it does not respond to data changes or user interaction.

Ssubratanp
79% match
Loading thumbnail…

Sol LeWitt

This example presents a nearly blank SVG canvas as a starting point for learning JavaScript. The page embeds a `<script>` tag within the SVG element, where console logging and basic operations illustrate language fundamentals. The code demonstrates variable assignment with `let` and `const`, demonstrates the increment operator, and defines functions using both arrow syntax and traditional `function` declarations. While the page shows no data visualization, it introduces core JavaScript concepts in the context of an SVG container. The concrete code uses no specific visualization libraries, relying instead on the browser’s native SVG and scripting support.

FFerasMorsi
79% match
Loading thumbnail…

Sol LeWitt reproduction attempt 2

This example reproduces a Sol LeWitt-inspired composition using JavaScript and the SVG DOM API, displaying a full-screen field of evenly spaced black vertical bars on a white background. The code creates an SVG element sized to the browser window and uses a `for` loop to append `rect` elements with a fixed bar width and gap. The number of bars is computed dynamically from the window width, ensuring the pattern fills the screen. This approach demonstrates direct manipulation of SVG elements without any external libraries.

Ddmr
79% match
Loading thumbnail…

Sol LeWitt Reproduction

Four plain rectangles of decreasing height stand in a row, approximating a bar chart through minimal geometric forms. The code uses raw SVG `rect` elements within an HTML document, with no data-binding or charting library. Each rectangle is manually positioned using fixed `x`, `y`, `width`, and `height` attributes, creating a static, composition-like visualization that echoes Sol LeWitt's instructional art. The page sets the body margin to zero and hides overflow, while the SVG canvas is sized at 960 by 500 pixels.

AAmauri Ribeiro
79% match
Loading thumbnail…

Sol LeWitt Reproduction

Four plain rectangles of decreasing height stand in a row, approximating a bar chart through minimal geometric forms. The code uses raw SVG `rect` elements within an HTML document, with no data-binding or charting library. Each rectangle is manually positioned using fixed `x`, `y`, `width`, and `height` attributes, creating a static, composition-like visualization that echoes Sol LeWitt's instructional art. The page sets the body margin to zero and hides overflow, while the SVG canvas is sized at 960 by 500 pixels.

AAmauri Ribeiro
79% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style drawing using only vertical bars. It shows a grid of thin, evenly spaced rectangles that fill the entire viewport, creating a rhythmic, pattern-based composition. The visualization is generated entirely with the browser’s native SVG interface, using `document.createElementNS` to construct each rectangle element. The script sets the total number of bars to 100, positioning them at fixed intervals of 20 pixels along the x-axis while each bar spans the full height of the window. No external libraries are used, relying solely on standard JavaScript and the SVG namespace.

PPrince Kumar
79% match