Madhu

@madhu799·3 public vizzes

Pseudo Bar Chart

This pseudo bar chart uses four rectangles to represent data values as vertical bars on an SVG canvas. It uses HTML and CSS to create a full-bleed, borderless viewport, along with JavaScript for potential interactivity (though none is currently implemented). The code directly specifies the `x`, `y`, `width`, and `height` attributes on each `<rect>` element, creating a bar chart with bars of varying heights and no axes or labels. The chart is rendered using the SVG API within an HTML document.

May 18, 2022

Loading thumbnail…

Fill & Stroke

This example demonstrates the visual difference between shapes with no fill or stroke and those with explicit white fill and black stroke. It uses raw SVG elements—`rect`, `circle`, and `path`—within an inline `<svg>` tag, with a white background rectangle covering the canvas. The top row shows unadorned shapes, while the bottom row applies `fill="white"` and `stroke="black"` with a thick `stroke-width` to highlight the contrast. The code is plain HTML/SVG, with no external libraries, and renders directly in the browser.

May 18, 2022

Loading thumbnail…

W1 SVG essentials

This example demonstrates basic SVG shape layering and symmetry. A series of overlapping red and white circles creates three target-like forms across the canvas, with white vertical rectangles and diagonal line segments adding structure on either side. The piece also includes a black path using relative lineto commands. Pure SVG, rendered directly in HTML.

May 18, 2022