rautprashant849@gmail.com

@PRASHANT203RAUT·4 public vizzes

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-inspired geometric composition using D3.js in an SVG renderer. It draws a grid of horizontal and vertical rectangles, with two masks applying contrasting cutout shapes—a star symbol in the first mask and a circle in the second—to create layered overlapping patterns. The code uses D3’s `select`, `range`, and `symbol` APIs to generate the marks and mask paths, with the star rendered via `d3.symbol` at a scaled size. The result is a clean, abstract interplay of striped forms and negative space, built entirely with SVG elements.

Jan 5, 2024

Loading thumbnail…

js start

This example reproduces a Sol LeWitt-style drawing using D3 and SVG. It shows a series of horizontal stripes clipped by a circular mask, creating a minimal geometric composition. The code uses D3’s `select` to create the SVG element and `data` joins to bind an array of 100 stripe marks, each rendered as a `rect` with a `mask` attribute referencing the circular clipping path. The mask consists of a black rectangle and a white circle, all defined via raw SVG DOM elements.

Jan 5, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the minimum structure needed to display static SVG shapes in a web page. It shows three red rectangles rendered on a large blue SVG canvas, each positioned at a different vertical coordinate with varying widths. The code uses plain HTML markup with inline SVG elements, including `<svg>` and `<rect>`, styled through the `fill` attribute. No JavaScript libraries or frameworks are employed; the visualization relies entirely on the browser’s native SVG rendering capabilities.

Jan 3, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic SVG composition built directly within an HTML page. It shows a square outline, two concentric circles, a diagonal line, and a diagonal path, all rendered as vector graphics. The code uses raw SVG elements, including `rect`, `circle`, `line`, and `path`, with inline coordinates and styling attributes. The rendering relies on the browser's native SVG support without any additional JavaScript libraries, making it a minimal starter for custom visualizations. The data is manually specified within the HTML markup.

Jan 3, 2024