Hayden-V

@Hayden-V·5 public vizzes

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.

Sep 14, 2022

Loading thumbnail…

Sol Lewit Repro

This example presents a generative art piece inspired by Sol LeWitt, rendered by drawing a series of vertical stripes across the full browser window. The visualization uses raw JavaScript with the Document Object Model (DOM) API, specifically creating Scalable Vector Graphics (SVG) elements via `document.createElementNS`. The code generates 100 rectangles, positioning each one along the x-axis with a fixed width and making them stretch the entire height of the viewport, resulting in a clean, minimal striped pattern that echoes LeWitt's systematic wall drawings. The artwork automatically adapts to the current window dimensions.

Sep 14, 2022

Loading thumbnail…

Fork of JavaScript Basics

A minimal HTML page demonstrates JavaScript syntax basics through commented-out examples and a single active function call. The page uses an SVG element and inline script, with all code commented except for a `person` function that creates and logs an object with `first` and `last` properties. The visualization shows the console output of `person('Jane', 'Doe')` using standard JavaScript object literal syntax. The file includes references to CSS and JavaScript, though the actual rendering relies solely on the SVG structure and console logging.

Sep 13, 2022

Loading thumbnail…

JavaScript Basics

This example demonstrates fundamental JavaScript syntax and programming concepts through a series of commented-out code snippets, with only the final function call active. The active code defines a `person` function that returns an object with `first` and `last` properties, then logs the result of calling it with `('Jane', 'Doe')` to the console. The rendered output is an empty SVG element, as the example focuses on console-based learning rather than visual output. It serves as a minimal HTML page using raw JavaScript, with no external libraries or frameworks.

Sep 13, 2022

Loading thumbnail…

Venable_fork

This example shows a single SVG canvas containing three concentric circles and a diagonal pink line. The circles are stacked, with the outermost circle using the default black fill, the middle circle filled red, and the innermost filled blue. The line stretches from the top-left corner toward the center-right. The visualization is built with plain HTML, CSS, and JavaScript, rendering directly to an SVG element. It demonstrates basic SVG shape creation using the `<circle>` and `<line>` elements within a React-free static page, with no interaction or data binding.

Sep 10, 2022