rashmi.s2055@gmail.com

@Rashmi2733·8 public vizzes

Ep3 using d3 and Sol Lewitt diff share

This example uses D3.js in a React framework to generate an abstract geometric composition inspired by Sol LeWitt. It renders 100 horizontal and vertical rectangles as SVG elements, layered with two masking shapes—a star and a plus symbol—to create intersecting patterns. The code leverages D3 selections, `range()`, and `symbol()` to generate the shapes, while SVG masks control which parts of the grid remain visible. The visualization adapts to the full browser window and demonstrates a modular approach to procedural art.

Feb 11, 2025

Loading thumbnail…

Ep3 using d3 and Sol Lewitt

This visualization generates a grid of horizontal and vertical bars using D3.js, which are clipped by two circular masks to create a layered geometric composition reminiscent of Sol LeWitt’s wall drawings. The front set of bars appears within a central circle, while the background bars are visible outside that circle, achieved through SVG mask elements with contrasting fill colors. The code uses D3's `select`, `range`, and data join APIs to efficiently append and style the rectangles, with the entire layout sized to the browser window via `window.innerWidth` and `window.innerHeight`.

Feb 11, 2025

Loading thumbnail…

Ep3 using js and Sol Lewitt

This interactive SVG composition, built with vanilla JavaScript and the DOM API, generates a grid-based abstract pattern inspired by Sol LeWitt. Vertical and horizontal translucent bars are drawn across the full viewport using `createElementNS`. SVG masks (`circle-mask` and `circle-mask-2`) are applied to these bars, revealing or concealing them within two circular regions centered on the canvas. The code defines a mask with a white circle on a black background to show the horizontal lines, while a second mask uses a black circle on a white background to show the vertical lines, creating a geometric interplay of shapes.

Feb 11, 2025

Loading thumbnail…

Ep3 using js

This example demonstrates JavaScript fundamentals through a browser console session, logging variable declarations, arithmetic operations, object mutation, loops, and function definitions. The code runs inside an SVG element on a static HTML page, using vanilla JavaScript without external libraries. It renders no visual data, focusing instead on programming concepts like arrow functions, object properties, and function returns. The page includes minimal CSS to remove body margins and hide overflow, with the SVG canvas dimensions set to 858 by 418 pixels.

Feb 11, 2025

Loading thumbnail…

Ep2

This example demonstrates the CSS cascade and selector specificity rules, showing a set of four horizontal bars and their labels. The bars' fill colors change based on whether they are styled by a class, an ID, an inline style attribute, or a default presentation attribute, with the class and inline styles overriding the SVG attributes while the ID also takes effect. The code uses raw SVG elements inside an HTML body, with styling applied via an embedded `<style>` block and the "Share Tech" font. It is a static visualization that never requires React.

Feb 11, 2025

Loading thumbnail…

Ep1 Exercise

This example shows a static SVG composition with geometric shapes arranged to form a simple scene, including circles, rectangles, and lines. It uses plain SVG elements within an HTML page, with CSS to hide scrollbars. The shapes have explicit coordinates and styling, such as green rectangles with black borders and a yellow circle with facial features, demonstrating basic vector graphics rendering with React and SVG.

Feb 10, 2025

Loading thumbnail…

SVG Fundamentals

This example shows fundamental SVG shapes—circles, rectangles, lines, and paths—rendered directly in an HTML document using inline SVG markup. It demonstrates how to set basic attributes like coordinates, dimensions, fill colors, strokes, and stroke widths for each geometric element. The path element includes a polyline defined by absolute coordinates, illustrating how SVG can construct arbitrary shapes for potential line or area charts. The code uses plain SVG without JavaScript or external libraries, with a fixed 950×500 canvas and hardcoded shape positions.

Feb 10, 2025

Loading thumbnail…

Face

A yellow circular face with two solid black eyes sits against a blank background, designed as the first step toward a smiley face. The SVG rendering uses three `<circle>` elements, one for the head and two for the eyes, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The head has a thick black outline, while the eyes are plain black without strokes. The art is encoded directly in `index.html` with no external JavaScript libraries or data sources.

Jan 18, 2025