nathananiel john agang

@nathanieljAgang·7 public vizzes

sole lowit reproduction vertical

A full-screen SVG composition displays 100 horizontal black rectangles layered vertically, with a circular mask revealing only a centered 200-pixel-radius region defined by white and black mask shapes. The code dynamically generates the SVG via the Document Object Model (DOM) `createElementNS` API, setting the mask’s rectangle and circle to control visibility. Each rect is assigned the mask using the `url(#circle-mask)` reference, creating a bold, striped window effect against a white background. The example demonstrates procedural SVG shape construction and masking without external libraries, relying purely on native browser APIs.

Aug 21, 2024

Loading thumbnail…

sole lowit reproduction vertical

This example generates a full-screen SVG graphic consisting of one hundred vertical rectangles, each ten pixels wide, positioned side-by-side across the viewport. The rectangles extend the entire height of the browser window, creating a uniform striped pattern. The visualization is built using the Document Object Model (DOM) API to create SVG elements, specifically `document.createElementNS` with the SVG namespace, and sets attributes such as `x`, `width`, and `height` directly on each `rect` element.

Aug 19, 2024

Loading thumbnail…

Fork of sole lowit reproduction

This example demonstrates a straightforward technique for populating an SVG canvas with vertical rectangles. The code creates 100 `<rect>` elements, each with a fixed width of 10 pixels, and positions them horizontally by incrementing their x-coordinate by 20 pixels for every iteration. The rectangles span the full height of the viewport, creating a striped pattern. It uses JavaScript to programmatically construct the SVG via the `document.createElementNS` API, setting the `width` and `height` attributes dynamically based on the browser window's inner dimensions. The rendering uses only basic shapes without any external libraries.

Aug 19, 2024

Loading thumbnail…

sole lowit reproduction

This example demonstrates the foundational structure of an SVG-based visualization, showing how SVG shapes and JavaScript interact within an HTML page. It begins with a basic `<svg>` element sized at 960 by 500 pixels, ready for drawing overlapping circles. The accompanying script contains commented-out JavaScript lessons covering variables, objects, loops, and comparisons. The active code defines an arrow function `person` that returns an object with `first` and `last` properties, then logs a result to the console. The visualization relies on core HTML, CSS, and JavaScript APIs, with no external libraries, and the embedded YouTube video explains broader concepts.

Aug 19, 2024

Loading thumbnail…

Fork of svg fundamental

This example demonstrates fundamental SVG rendering using static HTML elements, showing how basic shapes like circles and lines are defined within an SVG container. The visualization displays a red circle with a radius of 50 units, a purple circle without an explicit radius (which defaults to zero), and a line element with x and y coordinates—all specified using SVG's native attribute syntax. Built with plain JavaScript and CSS in a minimal HTML page, it uses no external libraries beyond the browser's native SVG support. The code reflects a forked starter template from VizHub, presenting raw SVG markup directly in the document body.

Aug 13, 2024

Loading thumbnail…

Fork of svg fundamental

This example demonstrates the fundamental structure of SVG shapes—circles and lines—within a bare-bones HTML page. It shows how basic SVG elements like `<circle>` with `fill` attributes and `<line>` are positioned using `cx`, `cy`, `x`, and `y` coordinates. The code uses no JavaScript libraries, relying purely on inline SVG markup and CSS defaults. A second HTML file isolates a single line element, highlighting the minimal markup required for SVG rendering. The rendering approach is direct SVG in the browser, with no data source or dynamic interaction.

Aug 12, 2024

Loading thumbnail…

svg fundamental

This example demonstrates basic SVG shapes on a plain HTML page: a red circle with an explicit radius, a purple circle without one, and a line. The code uses native SVG elements like `<circle>` and `<line>`, with CSS-style attributes for positioning and fill colors. It highlights how SVG rendering works in the browser without additional libraries, showing the structure of an inline `<svg>` container. The circles’ missing `r` attribute on the purple one is visible, while the line lacks specified coordinates.

Aug 12, 2024