Gautam Doshi

@gautamdoshi11·7 public vizzes

Fork of (2) Episode 3: Sol LeWitt in Vanilla JS - Vertical Variant

This example reproduces a Sol LeWitt wall drawing using two circular SVG masks to create an interplay of horizontal and vertical black lines. One mask reveals horizontal stripes inside a centered circle, while a second, inverted mask exposes vertical stripes outside that same circle. The artwork is generated entirely with vanilla JavaScript, creating over 200 SVG `rect` elements at fixed intervals, without any external libraries. The page fills the browser window, and the geometric composition is built purely from procedural code.

Jul 19, 2024

Loading thumbnail…

(2) Episode 3: Sol LeWitt in Vanilla JS

This visualization reproduces a Sol LeWitt art piece by rendering a series of vertical black bars across the browser window. It displays 100 rectangles, each 10 pixels wide, evenly spaced at 20-pixel intervals, creating a rhythmic, grid-like pattern that fills the entire viewport. The piece uses raw JavaScript and the SVG API, creating elements with `document.createElementNS` and appending them to the document. The code dynamically determines the canvas size using `window.innerWidth` and `window.innerHeight`, ensuring the artwork adapts to the screen dimensions.

Jul 19, 2024

Loading thumbnail…

Episode 3: JS Basics

This example reproduces a Sol LeWitt art piece as an SVG rendered through JavaScript code embedded in an HTML document. It demonstrates fundamental JavaScript concepts, including variable declarations with `const` and `let`, function definitions using both traditional syntax and ES6 arrow functions, and logging output to the console. The visible SVG canvas remains empty; the code’s primary purpose is to illustrate programming basics rather than generate visual content. It uses no external libraries, relying solely on the browser’s native SVG support and JavaScript interpreter.

Jul 18, 2024

Loading thumbnail…

Psuedo Visualisations Code Along (Episode 2)

An approximate bar plot shows five labeled categories with varied rectangular bar lengths on a blank canvas. Each bar uses raw SVG `rect` elements, with the first bar styled via a CSS class and the remaining bars filled with a solid red color. Text labels are positioned manually using SVG `text` elements, and the entire visualization is rendered within a fixed 501×389 viewBox.

Jul 11, 2024

Loading thumbnail…

Psuedo Viz - Gautam

This example demonstrates the minimal "Hello World" pattern for the VizHub V3 runtime environment, rendering a text string with an adjustable font size. The `main` function receives a container DIV and writes an HTML string with the current `fontSize` value into its inner HTML. The code exports a single `main` function that takes the container as its only argument, and the display changes dynamically when the numeric constant is edited with alt-drag. This serves as a blank slate for understanding the simplified entry point and hot-reloading capabilities of the environment.

Jul 9, 2024

Loading thumbnail…

Exercise 1: SVG Fundamentals - A rangefinder camera!

This example demonstrates the construction of a rangefinder camera using basic SVG shapes. The code renders a silver rectangular camera body, a black circular lens with a silver ring, and a semi-transparent top control element. It uses raw SVG elements including `<rect>` and `<circle>` within an `<svg>` container, with attributes like fill, stroke, stroke-width, and fill-opacity controlling appearance. The design is static and purely geometric, illustrating SVG fundamentals without any JavaScript libraries.

Jun 12, 2024

Loading thumbnail…

Video 1: SVG Fundamentals - work-along doc - Gautam

This example shows basic SVG shapes rendered inside an HTML page, including circles, a rectangle with a thick navy stroke, and a red line. It demonstrates how SVG elements are positioned using coordinates and styled with fill and stroke attributes directly in the markup. The code uses plain HTML and SVG, with no external libraries, and is part of a work-along document for learning SVG fundamentals with React. The rendering approach is declarative SVG within a single HTML file.

May 14, 2024