Skip to main content
SimilarExport ZIP
100%

Pseudo Visualizations

✓ Published1🌍 Public
Xxinyuwangxyw
Last edited Mar 4, 2023
Created on Mar 4, 2023
Forked from SVG Fundamentals

This example presents a minimalist set of stylized bar-chart glyphs drawn as SVG paths within a single small viewBox. The graphic shows three abstract vertical bars of varying heights, with a horizontal baseline, where hovering over any shape turns it black. The code uses raw SVG elements—`path`, `rect`, and `circle`—with inline stroke and fill attributes, and applies a CSS `:hover` rule with a 500ms transition to change the fill color. No external libraries or data sources are used; the visualization relies entirely on static SVG markup in an HTML document.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Graphs

Static SVG rectangles and paths form a simple bar-like chart where each shape has a distinct color and size, demonstrating basic vector graphics rendering. The page uses inline CSS to apply black strokes and varied fills, with a hover transition that gradually changes rectangle fill to midnightblue and increases stroke width over three seconds. This example shows how SVG elements can respond to user interaction through CSS transitions, with the markup structured directly in the HTML file.

DDasbach.EJ
88% match
Loading thumbnail…

Pseudo Bar

An SVG bar chart receives a minimalist reinterpretation through a pseudo-3D presentation. Five black rectangles of varying heights stand on a white background, their horizontal positions and vertical extents approximating categorical data values. The chart uses raw SVG `<rect>` elements, specifying x, y, width, and height coordinates to render each bar directly, with no JavaScript libraries or data-loading mechanisms involved. The static image, titled "Pseudo Bar," offers a simple, abstracted visual comparison.

Aalexscott-untitled
85% match
Loading thumbnail…

Pseudo Graph

This example demonstrates basic SVG chart construction by combining styled rectangles as bar elements with a single black path used as a pseudo graph line. The visualization shows a simple categorical bar chart with four bars of varying heights, each filled with a dark red color and outlined with a thick stroke. A second SVG element displays a small horizontal bar legend with four color-coded segments labeled A through D. The code uses raw SVG elements—`rect`, `path`, and `text`—with CSS classes and inline attributes, along with Google Fonts for typography, to create the layout without any JavaScript libraries.

DDilara Bozkurt
84% match
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.

DDhruva654
84% match
Loading thumbnail…

Pseudo Charts 3

This example presents a set of seven horizontal bars drawn as plain black rectangles, each labeled with a letter from A to G on the left. The chart demonstrates fundamental SVG shapes and styling, with hover effects that slowly transition the fill and stroke of both rectangles and text. The code uses raw SVG elements like `rect` and `text` within an inline `<svg>` tag, alongside CSS transitions triggered by the `:hover` pseudo-class. No external charting library is employed, only the browser’s native vector rendering capabilities.

Kkhaledakanan@gmail.com
84% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses SVG rectangles and paths to render a set of abstract, hand-drawn-style bars on a plain white background. The chart shows five vertical bars of varying heights and widths, arranged across the canvas with dark gray fills against a light gray backdrop. The code directly constructs each bar using static SVG elements, such as `<rect>` and `<path>`, rather than relying on a JavaScript library or data binding. With no scales, axes, or data-driven logic, this example serves as a minimal, visual approximation of a conventional bar chart.

WWannabeProgrammerr
84% match
Loading thumbnail…

Pseudo Bar Chart

This example presents a simple bar chart constructed entirely with SVG `<rect>` elements rather than a charting library. Four black bars of varying heights sit on a white background, with the values encoded by each rectangle’s `y` and `height` attributes. The chart uses raw SVG markup inside an `index.html` file, with no JavaScript or data binding—the bars are hardcoded. The visualization demonstrates how basic geometric shapes can approximate a bar chart without relying on D3 or other plotting tools.

Ttriciascully
84% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart uses hand-drawn SVG shapes to approximate a classic bar chart layout. Five teal rectangles and paths of varying heights and positions suggest categorical data values against a white background. Built with plain SVG in a single HTML file, the example demonstrates fundamental SVG elements like `rect` and `path` to craft a minimalist, abstract visualization. No JavaScript libraries or data sources are used; the rendering relies solely on static SVG markup.

Eellie.ackerson26@gmail.com
83% match