Gazzrant

@Gazzrant·5 public vizzes

GRT_Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for console output. The page displays a large, centered “Hello HTML!” message via a styled div element, while the accompanying script logs “hello world” to the browser console. It serves as a bare-bones starter template for web-based visualizations, relying on plain HTML, CSS, and vanilla JavaScript without any external libraries or data sources.

May 17, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt wall drawing using layered, masked geometric shapes. It shows a grid of horizontal and vertical lines that create a visual effect of concentric rings by using two SVG masks to reveal or hide portions of the line arrays. The artwork uses raw SVG elements and the JavaScript DOM API to construct a full-screen canvas, generating 100 horizontal and 100 vertical stripes, with the masks defined as a white triangle and a central black circle to modulate visibility.

May 10, 2022

Loading thumbnail…

GT Fork of Sol LeWitt Reproduction

This example shows a generative reproduction of a Sol LeWitt wall drawing, built entirely with inline SVG and the DOM API. It draws 100 horizontal and 100 vertical striped rectangles across the viewport, and uses two SVG masks to carve a central circular reveal: the first mask clips the horizontal bars, the second masks the vertical bars. The result is a grid of lines that intersect only inside the circle. The code uses `document.createElementNS` and `setAttribute` for all SVG construction.

May 10, 2022

Loading thumbnail…

Sol Lewitt

This example generates a striped pattern of 100 horizontal rectangles that cover the full width of the viewport, creating a simple optical art effect. A circular SVG mask is defined with a black circle, though the mask is not applied to the rectangles in the code. The visualization uses raw SVG APIs—`document.createElementNS` for elements and `setAttribute` for properties—rather than a library, producing an abstract, minimalist composition inspired by Sol LeWitt’s wall drawings.

May 10, 2022

Loading thumbnail…

GT_SVG_fundamental

This example demonstrates the fundamental use of SVG for data visualization, displaying a single brown circle positioned at coordinates (50, 50) with a radius of 50. The visualization is rendered through an inline SVG element within an HTML page, using only native SVG markup without any JavaScript or external libraries. The circle’s placement and styling are defined directly through SVG attributes (cx, cy, r, fill), showing the basic building blocks for creating geometric shapes in a browser. The example serves as a minimal starting point for understanding how SVG primitives form the foundation for more complex visualizations.

May 9, 2022