kavitha G

@kavithagnanasekaran·5 public vizzes

Fork of Sol LeWitt Reproduction-adding svg background color

A browser-based reproduction of a Sol LeWitt wall drawing uses raw SVG and JavaScript to generate geometric line art. Two groups of thin horizontal and vertical lines are drawn across the full window, with circular masks applied so the lines only appear inside a central circle. A yellow background rectangle fills the screen, while brown vertical lines contrast with the default black horizontal strokes. The code builds the SVG DOM manually using `document.createElementNS` and `setAttribute`, without relying on any external visualization library.

Nov 21, 2022

Loading thumbnail…

Sol LeWitt Reproduction-Learning-pt1

This example reproduces a Sol LeWitt art piece using SVG, displaying a central circle where horizontal and vertical lines intersect against a contrasting background. The circle is highlighted with yellow horizontal stripes, while the surrounding area features red vertical lines. The code uses raw SVG APIs to construct masks, specifically `createElementNS` for elements like `rect`, `circle`, and `mask`, defining visible regions. Horizontal stripes are masked by a white circle, while vertical lines use a rectangular mask with a transparent cutout, creating the layered geometric composition.

Nov 21, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction-Learning

This generative artwork reproduces a Sol LeWitt piece, displaying a grid of horizontal and vertical bands that only appear within circular viewing windows at the center of the canvas. Two SVG masks, `circle-mask` and `circle-mask-2`, control visibility: a white circle reveals the horizontal strips on a black background, while an inverse mask reveals the vertical strips on the surrounding white area. The drawing is constructed purely with JavaScript, creating 100 rectangle elements for each orientation and applying the masks via the `mask` attribute. The result is an intersecting pattern that visually swaps foreground and background between the two circular regions.

Nov 20, 2022

Loading thumbnail…

D3 Course Fundamentals

This example demonstrates fundamental SVG shapes as a bare HTML page, setting the stage for D3 course fundamentals. It renders circles, a line, and a polygon path using native SVG elements with attributes for positioning, fill colors, strokes, and stroke widths. The code uses plain HTML and CSS-free JavaScript references, with no D3 library invoked. The rendering approach relies entirely on static SVG markup, showing basic geometric primitives like `circle`, `line`, and `path` without interaction or data binding.

Oct 26, 2022

Loading thumbnail…

Episode 1:Creating SVG of Wassily Kandinsky art

This example recreates Wassily Kandinsky’s abstract art using hand-coded SVG shapes, including triangles, lines, rectangles, and circles, alongside gradient definitions. It juxtaposes the original image with the SVG rendering, demonstrating how geometric compositions and color gradients can be replicated programmatically. The code uses native SVG elements like `linearGradient`, `radialGradient`, `path`, and `circle`, all embedded within a static React-rendered page. No external visualization library is used; the artwork is built directly from SVG markup in the HTML file.

May 23, 2022