Dhruva654

@Dhruva654·11 public vizzes

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric pattern using D3. Horizontal and vertical bands of rectangles are drawn across the entire viewport, each filtered through a mask that reveals a large circular shape in the center. The code uses `d3.select`, `d3.range`, and `d3.symbol` with `d3.symbols[1]` to generate the circular path, while `d3.join` applies rectangle data points. The SVG rendering is driven by a mask system where one mask inverts the circle to cut out the central area, creating an optical interaction of lines.

Apr 4, 2023

Loading thumbnail…

D3 Svg

This is a generative SVG art piece that reproduces a Sol LeWitt drawing using a grid of vertical and horizontal bars. The visualization shows a square canvas filled with a pattern of 100 thin, evenly spaced strokes, with a central circular region where the lines intersect to create a distinct visual effect. The work is built with the raw SVG DOM API in a browser, using `<rect>` elements and two masked layers, `circleMask` and `circleMask2`, to selectively reveal or hide the bars within and outside the circle. The code uses plain JavaScript with no external libraries, setting the canvas to the full browser window size.

Apr 2, 2023

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

Four labeled bars form an approximate horizontal bar chart comparing categorical values A through D. The first bar is styled distinctly with a blue fill and black stroke, while the remaining bars use black fills. The visualization is built directly with SVG elements, using `rect` shapes for the bars and `text` elements for the labels. It renders at 960 by 500 pixels, with bar widths that decrease from 802 to 241 pixels, suggesting relative quantities for each category.

Mar 30, 2023

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot displays six uniformly sized circles across a white canvas, suggesting a loose upward trend without any coordinate axes or gridlines. Each circle is positioned at specific pixel coordinates and has a constant radius of 34.5, creating an abstract approximation of a scatterplot. The visualization uses raw SVG elements—specifically `<rect>` and `<circle>` tags—defined directly in the HTML structure, with no JavaScript libraries or data-binding mechanisms involved. The rendering is purely static, relying on SVG's native shape-drawing capabilities within a fixed 960-by-500 viewport.

Mar 29, 2023

Loading thumbnail…

Circle boy

A single, stylized circular "boy" figure stands centered against a plain background, its form rendered through a simple, bold graphic. The entire visualization consists of a static HTML page with no interactive elements. The project leverages the React framework to structure the minimal application, while the visual identity is built from scratch using a combination of standard HTML, CSS styling, and a minimal JavaScript script. The core visual is purely declarative, with the circle’s appearance and any subtle details being driven by the author’s custom code in the CSS and JavaScript files.

Mar 29, 2023

Loading thumbnail…

SVG WIZARDS ONLY

A monochrome SVG composition built solely from HTML rectangles, lines, and paths forms an abstract geometric figure against a black background. The gray shapes suggest architectural elements or a stylized creature, with thin white line details adding contrast. The visualization is rendered statically through React, using raw SVG primitives like `<rect>` and `<line>` to construct the entire image without any JavaScript libraries or interactive behavior.

Feb 19, 2023

Loading thumbnail…

Untitled

A black canvas displays a dense, abstract composition of gray geometric shapes, including rectangles, lines, and small path elements, built entirely with raw SVG markup in a React component. The layout suggests a stylized architectural or mechanical diagram, with distinct clusters of blocks and connectors arranged across the 970×817 viewport. The code defines each shape explicitly via SVG elements like `rect`, `line`, `ellipse`, and `path`, with no external data source or visualization library, relying solely on hardcoded coordinates and fixed styling. The rendering is static, with no interaction or animation.

Feb 19, 2023

Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart presents a minimalist data-visualization composition using only raw SVG elements, including rectangles and a path, to create the appearance of a bar chart without any underlying data. The chart features a series of black bars of varying heights and widths positioned on a white background, simulating a categorical or temporal comparison. The rendering relies entirely on static SVG markup within an HTML page, with no JavaScript libraries or interaction. The example demonstrates how visual structure alone can evoke chart semantics, even in the absence of axes, labels, or data-binding logic.

Feb 10, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, showing layered circles and a styled rectangle within a 960-by-500 viewport. It uses plain SVG markup with inline attributes to control fill colors, strokes, and dimensions, including overlapping red and green circles and a yellow rectangle with a thick navy border. The visualization highlights basic vector graphics rendering in the browser without relying on any JavaScript libraries, serving as a static illustration of SVG’s core drawing capabilities.

Feb 2, 2023

Loading thumbnail…

SVG

This example demonstrates the fundamental use of SVG (Scalable Vector Graphics) for drawing a simple red circle directly within an HTML page. It serves as a bare-minimum illustration of embedding vector shapes inline, contrasting with raster images. The code uses native HTML elements—specifically the `<circle>` tag with attributes for positioning (`cx`, `cy`), size (`r`), and styling via the `fill` property—all placed inside the document's `<head>`. It relies on standard browser rendering of SVG and CSS without any JavaScript or external libraries like React, showing the raw markup approach.

Feb 2, 2023

Loading thumbnail…

Amazing who made this

This visualization presents a colorful, animated landscape composed of layered SVG rectangles forming a striped sky, with drifting clouds moving along predefined paths via SMIL animations and a large flower with a green stem and multicolored petals. The scene is built entirely with inline SVG shapes—`rect`, `circle`, `ellipse`, and `path` elements—and uses `<animateMotion>` for cloud movement. Each flower petal and cloud component is individually colored, creating a playful, hand-crafted aesthetic with no external JavaScript libraries or data sources.

Dec 26, 2022