nubhatia

@nubhatia·7 public vizzes

Lesson4:Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It renders a grid of horizontal and vertical bands that are masked by circular shapes, creating a dynamic geometric pattern. The code uses D3's `select` and `append` methods to build the SVG element and its components. It leverages the `mask` attribute with defined `circle-mask` and `circle-mask-2` elements to selectively reveal or hide the lines. The visualization is generated entirely through procedural code, with no external data source, and displays its pattern across the full browser window.

Aug 16, 2023

Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Aug 10, 2023

Loading thumbnail…

Fork of JS Example 2-Horizontal

A full-screen SVG is constructed entirely with native DOM methods via `document.createElementNS`, without any external libraries. It draws 100 horizontal blue rectangles, each 10 pixels tall, stacked vertically across the viewport. A circular mask with a 200-pixel radius, centered on the screen, restricts visibility to a round window showing a portion of the stripes. The mask uses a white-filled circle, and every rectangle references this mask through its `mask` attribute, creating a simple geometric pattern reminiscent of a flag.

Aug 10, 2023

Loading thumbnail…

Exercise2: Pseudo Visualization

Four horizontal bars, colored orange, red, green, and blue, with varying widths, sit on a white background, each outlined in black. The visualization uses basic Scalable Vector Graphics (SVG) primitives—`rect` elements defined directly in the HTML—to create a static, pseudo-chart that mimics a stacked bar layout. No JavaScript libraries or data-binding frameworks are present; the rendering is purely declarative, with positions and dimensions hard-coded in the markup and styling provided by a simple external stylesheet.

Aug 2, 2023

Loading thumbnail…

Exercise1:Indian Flag

A static SVG rendering of the Indian flag uses three horizontal rectangles in orange, white, and green, with a black-outlined circle at the center. The code defines these shapes directly in HTML, with the orange band and circle featuring `<animate>` elements that move them across the viewport on a repeating 15-second loop. The white and green bands remain fixed, while the animation shifts the sliding elements between -100px and 960px, creating a simple motion effect. No external libraries are used; the visualization relies solely on native SVG and CSS rules from the linked stylesheet.

Aug 2, 2023

Loading thumbnail…

Rising-Setting Sun

An animated SVG scene depicts a sun rising and setting over layered landscapes. The circular sun moves vertically along the canvas, and the sky’s radial gradient shifts from light aliceblue to dark indigo, while the two landscape paths use linear gradients that transition from aliceblue to steelblue and midnightblue. These color changes are driven by SMIL `<animate>` elements on the gradient stops and the sun’s `cy` attribute, with repeating 15-second cycles. The artwork is built entirely with raw SVG shapes and gradients, without external JavaScript libraries.

Aug 1, 2023

Loading thumbnail…

SVG Fundamentals

A static SVG scene displays two primitive shapes: a red circle and an orange line, rendered directly within an inline SVG element. The example demonstrates fundamental SVG markup using the `<circle>` and `<line>` elements, with coordinates and styling attributes set via raw XML. It shows how basic geometric shapes and stroke properties are declared without external libraries or data binding, serving as a minimal introduction to Scalable Vector Graphics syntax. The fixed 960×500 viewport and hardcoded attributes highlight the manual construction of visual elements in plain SVG.

Jul 31, 2023